[new feature] add overlay component

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'

src/dropdown-menu/test/__snapshots__/index.spec.js.snap

@@ -37,7 +37,7 @@ exports[`close on click outside 1`] = `
         <div class="van-cell__title"><span>B</span></div>
       </div>
     </div>
-    <div class="van-overlay van-fade-leave van-fade-leave-active" style="z-index: 2004; z-index: 2004; position: absolute; animation-duration: 0.2s;"></div>
+    <div class="van-overlay van-fade-leave van-fade-leave-active" style="z-index: 2004; position: absolute; animation-duration: 0.2s;"></div>
   </div>
   <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
     <!---->
@@ -83,7 +83,7 @@ exports[`direction up 1`] = `
         <div class="van-cell__title"><span>B</span></div>
       </div>
     </div>
-    <div class="van-overlay van-fade-enter van-fade-enter-active" style="z-index: 2006; z-index: 2006; position: absolute; animation-duration: 0.2s;"></div>
+    <div class="van-overlay van-fade-enter van-fade-enter-active" style="z-index: 2006; position: absolute; animation-duration: 0.2s;"></div>
   </div>
   <div class="van-dropdown-item van-dropdown-item--up" style="z-index: 10; bottom: 768px; display: none;">
     <!---->
@@ -115,7 +115,7 @@ exports[`show dropdown item 1`] = `
         <div class="van-cell__title"><span>B</span></div>
       </div>
     </div>
-    <div class="van-overlay van-fade-enter van-fade-enter-active" style="z-index: 2000; z-index: 2000; position: absolute; animation-duration: 0.2s;"></div>
+    <div class="van-overlay van-fade-enter van-fade-enter-active" style="z-index: 2000; position: absolute; animation-duration: 0.2s;"></div>
   </div>
   <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
     <!---->
@@ -150,7 +150,7 @@ exports[`show dropdown item 2`] = `
         <div class="van-cell__title"><span>B</span></div>
       </div>
     </div>
-    <div class="van-overlay van-fade-enter van-fade-enter-active" style="z-index: 2001; z-index: 2001; position: absolute; animation-duration: 0.2s;"></div>
+    <div class="van-overlay van-fade-enter van-fade-enter-active" style="z-index: 2001; position: absolute; animation-duration: 0.2s;"></div>
   </div>
 </div>
 `;
@@ -182,7 +182,7 @@ exports[`show dropdown item 3`] = `
         <div class="van-cell__title"><span>B</span></div>
       </div>
     </div>
-    <div class="van-overlay van-fade-leave van-fade-leave-active" style="z-index: 2001; z-index: 2001; position: absolute; animation-duration: 0.2s;"></div>
+    <div class="van-overlay van-fade-leave van-fade-leave-active" style="z-index: 2001; position: absolute; animation-duration: 0.2s;"></div>
   </div>
 </div>
 `;

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;
   }
 }
 

src/overlay/README.md

@@ -0,0 +1,53 @@
+# Overlay
+
+### Install
+
+``` javascript
+import { Overlay } from 'vant';
+
+Vue.use(Overlay);
+```
+
+## Usage
+
+### Basic Usage
+
+```html
+<van-button
+  type="primary"
+  text="Show Overlay"
+  @click="show = true"
+/>
+
+<van-overlay
+  :show="show"
+  @click="show = false"
+/>
+```
+
+```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 | - |

src/overlay/README.zh-CN.md

@@ -0,0 +1,57 @@
+# Overlay 遮罩层
+
+### 介绍
+
+创建一个遮罩层，用于强调特定的页面元素，并阻止用户进行其他操作
+
+### 引入
+
+``` javascript
+import { Overlay } from 'vant';
+
+Vue.use(Overlay);
+```
+
+## 代码演示
+
+### 基础用法
+
+```html
+<van-button
+  type="primary"
+  text="显示遮罩层"
+  @click="show = true"
+/>
+
+<van-overlay
+  :show="show"
+  @click="show = false"
+/>
+```
+
+```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 | 点击时触发 | - |

src/overlay/demo/index.vue

@@ -0,0 +1,74 @@
+<template>
+  <demo-section>
+    <demo-block :title="$t('basicUsage')">
+      <van-button
+        type="primary"
+        :text="$t('showOverlay')"
+        style="margin-left: 15px;"
+        @click="show = true"
+      />
+
+      <van-overlay
+        :show="show"
+        @click="show = false"
+      />
+    </demo-block>
+  </demo-section>
+</template>
+
+<script>
+export default {
+  i18n: {
+    'zh-CN': {
+      showOverlay: '显示遮罩层'
+    },
+    'en-US': {
+      showOverlay: 'Show Overlay'
+    }
+  },
+
+  data() {
+    return {
+      show: false
+    };
+  }
+};
+</script>
+
+<style lang="less">
+.demo-skeleton {
+  background-color: #fff;
+
+  .van-switch {
+    margin: 0 15px 10px;
+  }
+
+  .demo-preview {
+    display: flex;
+    padding: 0 15px;
+
+    .demo-content {
+      padding-top: 6px;
+
+      h3 {
+        margin: 0;
+        font-size: 18px;
+        line-height: 20px;
+      }
+
+      p {
+        margin: 13px 0 0;
+        font-size: 14px;
+        line-height: 20px;
+      }
+    }
+
+    img {
+      flex-shrink: 0;
+      width: 32px;
+      height: 32px;
+      margin-right: 15px;
+    }
+  }
+}
+</style>

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;
+  customStyle?: any;
-  duration: number | null;
-  customStyle?: object;
 };
 
 export type OverlayEvents = {
@@ -42,7 +42,7 @@ function Overlay(
   return (
     <transition name="van-fade">
       <div
-        vShow={props.visible}
+        vShow={props.show}
         style={style}
         class={[bem(), props.className]}
         onTouchmove={preventTouchMove}
@@ -53,12 +53,15 @@ function Overlay(
 }
 
 Overlay.props = {
-  zIndex: Number,
+  show: Boolean,
   className: null as any,
-  visible: Boolean,
+  customStyle: null as any,
-  customStyle: Object,
+  zIndex: {
+    type: [Number, String],
+    default: 1
+  },
   duration: {
-    type: Number,
+    type: [Number, String],
     default: null
   }
 };

src/overlay/test/__snapshots__/demo.spec.js.snap

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders demo correctly 1`] = `
+<div>
+  <div><button class="van-button van-button--primary van-button--normal" style="margin-left: 15px;"><span class="van-button__text">显示遮罩层</span></button>
+    <div class="van-overlay" style="z-index: 1; display: none;" name="van-fade"></div>
+  </div>
+</div>
+`;

src/overlay/test/__snapshots__/index.spec.js.snap

@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`class-name prop 1`] = `<div class="van-overlay my-overlay" style="z-index: 1;" name="van-fade"></div>`;
+
+exports[`duration prop 1`] = `<div class="van-overlay" style="z-index: 1; animation-duration: 1s;" name="van-fade"></div>`;
+
+exports[`z-index prop 1`] = `<div class="van-overlay" style="z-index: 99;" name="van-fade"></div>`;

src/overlay/test/demo.spec.js

@@ -0,0 +1,4 @@
+import Demo from '../demo';
+import demoTest from '../../../test/demo-test';
+
+demoTest(Demo);

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);
+});