From f6e69f3caac57e8192971567f4ddcd40a9063622 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= Date: Sat, 6 Jul 2019 15:18:37 +0800 Subject: [PATCH] [new feature] add overlay component --- docs/site/doc.config.js | 8 ++ .../test/__snapshots__/index.spec.js.snap | 10 +-- src/mixins/popup/overlay.ts | 4 +- src/overlay/README.md | 53 +++++++++++++ src/overlay/README.zh-CN.md | 57 ++++++++++++++ src/overlay/demo/index.vue | 74 +++++++++++++++++++ src/overlay/index.tsx | 21 +++--- .../test/__snapshots__/demo.spec.js.snap | 9 +++ .../test/__snapshots__/index.spec.js.snap | 7 ++ src/overlay/test/demo.spec.js | 4 + src/overlay/test/index.spec.js | 49 ++++++++++++ 11 files changed, 280 insertions(+), 16 deletions(-) create mode 100644 src/overlay/README.md create mode 100644 src/overlay/README.zh-CN.md create mode 100644 src/overlay/demo/index.vue create mode 100644 src/overlay/test/__snapshots__/demo.spec.js.snap create mode 100644 src/overlay/test/__snapshots__/index.spec.js.snap create mode 100644 src/overlay/test/demo.spec.js create mode 100644 src/overlay/test/index.spec.js diff --git a/docs/site/doc.config.js b/docs/site/doc.config.js index bd6163591..b2d4abe78 100644 --- a/docs/site/doc.config.js +++ b/docs/site/doc.config.js @@ -197,6 +197,10 @@ export default { path: '/notify', title: 'Notify 消息通知' }, + { + path: '/overlay', + title: 'Overlay 遮罩层' + }, { path: '/pull-refresh', title: 'PullRefresh 下拉刷新' @@ -527,6 +531,10 @@ export default { path: '/notify', title: 'Notify' }, + { + path: '/overlay', + title: 'Overlay 遮罩层' + }, { path: '/pull-refresh', title: 'PullRefresh' diff --git a/src/dropdown-menu/test/__snapshots__/index.spec.js.snap b/src/dropdown-menu/test/__snapshots__/index.spec.js.snap index 35511d7f1..e6084ce8f 100644 --- a/src/dropdown-menu/test/__snapshots__/index.spec.js.snap +++ b/src/dropdown-menu/test/__snapshots__/index.spec.js.snap @@ -37,7 +37,7 @@ exports[`close on click outside 1`] = `
B
-
+
-
+
-
+
-
+
`; @@ -182,7 +182,7 @@ exports[`show dropdown item 3`] = `
B
-
+
`; diff --git a/src/mixins/popup/overlay.ts b/src/mixins/popup/overlay.ts index 268d77230..5a6ac8421 100644 --- a/src/mixins/popup/overlay.ts +++ b/src/mixins/popup/overlay.ts @@ -50,10 +50,10 @@ export function updateOverlay(): void { } Object.assign(overlay, defaultConfig, config, { - visible: true + show: true }); } else { - overlay.visible = false; + overlay.show = false; } } diff --git a/src/overlay/README.md b/src/overlay/README.md new file mode 100644 index 000000000..39abe1329 --- /dev/null +++ b/src/overlay/README.md @@ -0,0 +1,53 @@ +# Overlay + +### Install + +``` javascript +import { Overlay } from 'vant'; + +Vue.use(Overlay); +``` + +## Usage + +### Basic Usage + +```html + + + +``` + +```js +export default { + data() { + return { + show: false + } + } +}, +``` + +## API + +### Props + +| Attribute | Description | Type | Default | +|------|------|------|------| +| show | Whether to show overlay | `Boolean` | `false` | +| z-index | z-index | `Number | String` | `1` | +| duration | Animation duration | `Number | String` | `0.3` | +| class-name | ClassName | `String` | - | + +### Events + +| Event | Description | Arguments | +|------|------|------| +| click | Triggered when clicked | - | diff --git a/src/overlay/README.zh-CN.md b/src/overlay/README.zh-CN.md new file mode 100644 index 000000000..7623e2c6a --- /dev/null +++ b/src/overlay/README.zh-CN.md @@ -0,0 +1,57 @@ +# Overlay 遮罩层 + +### 介绍 + +创建一个遮罩层，用于强调特定的页面元素，并阻止用户进行其他操作 + +### 引入 + +``` javascript +import { Overlay } from 'vant'; + +Vue.use(Overlay); +``` + +## 代码演示 + +### 基础用法 + +```html + + + +``` + +```js +export default { + data() { + return { + show: false + } + } +}, +``` + +## API + +### Props + +| 参数 | 说明 | 类型 | 默认值 | 版本 | +|------|------|------|------|------| +| show | 是否展示遮罩层 | `Boolean` | `false` | - | +| z-index | z-index 层级 | `Number | String` | `1` | - | +| duration | 动画时长，单位秒 | `Number | String` | `0.3` | - | +| class-name | 自定义类名 | `String` | - | - | + +### Events + +| 事件名 | 说明 | 回调参数 | +|------|------|------| +| click | 点击时触发 | - | diff --git a/src/overlay/demo/index.vue b/src/overlay/demo/index.vue new file mode 100644 index 000000000..da2b5da52 --- /dev/null +++ b/src/overlay/demo/index.vue @@ -0,0 +1,74 @@ + + + + + diff --git a/src/overlay/index.tsx b/src/overlay/index.tsx index f7c53c020..1de4784ba 100644 --- a/src/overlay/index.tsx +++ b/src/overlay/index.tsx @@ -7,11 +7,11 @@ import { CreateElement, RenderContext } from 'vue/types'; import { DefaultSlots } from '../utils/types'; export type OverlayProps = { - zIndex?: number; + show?: boolean; + zIndex?: number | string; + duration: number | string | null; className?: any; - visible?: boolean; - duration: number | null; - customStyle?: object; + customStyle?: any; }; export type OverlayEvents = { @@ -42,7 +42,7 @@ function Overlay( return (
+
+ +
+
+`; diff --git a/src/overlay/test/__snapshots__/index.spec.js.snap b/src/overlay/test/__snapshots__/index.spec.js.snap new file mode 100644 index 000000000..6af6f94ee --- /dev/null +++ b/src/overlay/test/__snapshots__/index.spec.js.snap @@ -0,0 +1,7 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`class-name prop 1`] = `
`; + +exports[`duration prop 1`] = `
`; + +exports[`z-index prop 1`] = `
`; diff --git a/src/overlay/test/demo.spec.js b/src/overlay/test/demo.spec.js new file mode 100644 index 000000000..d647cfabc --- /dev/null +++ b/src/overlay/test/demo.spec.js @@ -0,0 +1,4 @@ +import Demo from '../demo'; +import demoTest from '../../../test/demo-test'; + +demoTest(Demo); diff --git a/src/overlay/test/index.spec.js b/src/overlay/test/index.spec.js new file mode 100644 index 000000000..83101620a --- /dev/null +++ b/src/overlay/test/index.spec.js @@ -0,0 +1,49 @@ +import { mount } from '../../../test/utils'; +import Overlay from '..'; + +test('z-index prop', () => { + const wrapper = mount(Overlay, { + propsData: { + show: true, + zIndex: 99 + } + }); + + expect(wrapper).toMatchSnapshot(); +}); + +test('class-name prop', () => { + const wrapper = mount(Overlay, { + propsData: { + show: true, + className: 'my-overlay' + } + }); + + expect(wrapper).toMatchSnapshot(); +}); + +test('duration prop', () => { + const wrapper = mount(Overlay, { + propsData: { + show: true, + duration: 1 + } + }); + + expect(wrapper).toMatchSnapshot(); +}); + +test('click event', () => { + const onClick = jest.fn(); + const wrapper = mount(Overlay, { + context: { + on: { + click: onClick + } + } + }); + + wrapper.trigger('click'); + expect(onClick).toHaveBeenCalledTimes(1); +});