[new feature]: 新增组件 overlay (#1992)

example/app.json

@@ -54,6 +54,7 @@
     "pages/rate/index",
     "pages/collapse/index",
     "pages/picker/index",
+    "pages/overlay/index",
     "pages/circle/index"
   ],
   "window": {
@@ -113,6 +114,7 @@
     "van-collapse": "./dist/collapse/index",
     "van-collapse-item": "./dist/collapse-item/index",
     "van-picker": "./dist/picker/index",
+    "van-overlay": "./dist/overlay/index",
     "van-circle": "./dist/circle/index"
   },
   "sitemapLocation": "sitemap.json"

example/config.js

@@ -102,6 +102,10 @@ export default [
       {
         path: '/toast',
         title: 'Toast 轻提示'
+      },
+      {
+        path: '/overlay',
+        title: 'Overlay 遮罩层'
       }
     ]
   },

example/pages/overlay/index.js

@@ -0,0 +1,13 @@
+import Page from '../../common/page';
+
+Page({
+  data: {
+    show: false
+  },
+  onClickShow() {
+    this.setData({ show: true });
+  },
+  onClickHide() {
+    this.setData({ show: false });
+  }
+});

example/pages/overlay/index.json

@@ -0,0 +1,3 @@
+{
+  "navigationBarTitleText": "Overlay 遮罩层"
+}

example/pages/overlay/index.wxml

@@ -0,0 +1,6 @@
+<demo-block title="基础用法" padding>
+  <van-button bind:click="onClickShow">
+    显示遮罩层
+  </van-button>
+  <van-overlay show="{{ show }}" bind:click="onClickHide"/>
+</demo-block>

packages/overlay/README.md

@@ -0,0 +1,50 @@
+# Overlay 遮罩层
+
+### 引入
+在`app.json`或`index.json`中引入组件，默认为`ES6`版本，`ES5`引入方式参见[快速上手](#/quickstart)
+
+```json
+"usingComponents": {
+  "van-overlay": "path/to/vant-weapp/dist/overlay/index"
+}
+```
+
+
+## 代码演示
+
+### 基础用法
+
+```html
+<van-button bind:click="onClickShow">显示遮罩层</van-button>
+<van-overlay show="{{ show }}" bind:click="onClickHide"/>
+```
+
+```js
+Page({
+  data: {
+    show: false
+  },
+  onClickShow() {
+    this.setData({ show: true });
+  },
+  onClickHide() {
+    this.setData({ show: false });
+  }
+});
+```
+
+### Props
+
+| Attribute | Description | Type | Default | Version |
+|------|------|------|------|------|
+| show | 是否展示遮罩层 | *boolean* | `false` | - |
+| mask | 是否展示蒙层背景 | *boolean* | `true` | - |
+| z-index | z-index 层级 | *string \| number* | `1` | - |
+| duration | 动画时长，单位秒 | *string \| number* | `0.3` | - |
+| class-name | 自定义类名 | *string* | - | - |
+
+### Events
+
+| 事件名 | 说明 | 回调参数 |
+|-----------|-----------|-----------|
+| bind:click | 点击时触发 | - |

packages/overlay/index.ts

@@ -4,7 +4,10 @@ import { VantComponent } from '../common/component';
 VantComponent({
   props: {
     show: Boolean,
-    mask: Boolean,
+    mask: {
+      type: Boolean,
+      value: true
+    },
     customStyle: String,
     duration: {
       type: null,