From dffdf3bae94add4f1f0978b408a8cd17fae7bed3 Mon Sep 17 00:00:00 2001 From: creeperdance Date: Mon, 9 Sep 2019 14:48:18 +0800 Subject: [PATCH] =?UTF-8?q?[new=20feature]:=20=E6=96=B0=E5=A2=9E=E7=BB=84?= =?UTF-8?q?=E4=BB=B6=20overlay=20(#1992)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- example/app.json | 2 ++ example/config.js | 4 +++ example/pages/overlay/index.js | 13 +++++++++ example/pages/overlay/index.json | 3 ++ example/pages/overlay/index.wxml | 6 ++++ packages/overlay/README.md | 50 ++++++++++++++++++++++++++++++++ packages/overlay/index.ts | 5 +++- 7 files changed, 82 insertions(+), 1 deletion(-) create mode 100644 example/pages/overlay/index.js create mode 100644 example/pages/overlay/index.json create mode 100644 example/pages/overlay/index.wxml create mode 100644 packages/overlay/README.md diff --git a/example/app.json b/example/app.json index 5e78ac7a..597ab3a9 100644 --- a/example/app.json +++ b/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" diff --git a/example/config.js b/example/config.js index 41fbc642..e5fae86b 100644 --- a/example/config.js +++ b/example/config.js @@ -102,6 +102,10 @@ export default [ { path: '/toast', title: 'Toast 轻提示' + }, + { + path: '/overlay', + title: 'Overlay 遮罩层' } ] }, diff --git a/example/pages/overlay/index.js b/example/pages/overlay/index.js new file mode 100644 index 00000000..e6e1ee61 --- /dev/null +++ b/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 }); + } +}); diff --git a/example/pages/overlay/index.json b/example/pages/overlay/index.json new file mode 100644 index 00000000..e99ebc2e --- /dev/null +++ b/example/pages/overlay/index.json @@ -0,0 +1,3 @@ +{ + "navigationBarTitleText": "Overlay 遮罩层" +} diff --git a/example/pages/overlay/index.wxml b/example/pages/overlay/index.wxml new file mode 100644 index 00000000..91f60174 --- /dev/null +++ b/example/pages/overlay/index.wxml @@ -0,0 +1,6 @@ + + + 显示遮罩层 + + + \ No newline at end of file diff --git a/packages/overlay/README.md b/packages/overlay/README.md new file mode 100644 index 00000000..ca2fb11a --- /dev/null +++ b/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 +显示遮罩层 + +``` + +```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 | 点击时触发 | - | \ No newline at end of file diff --git a/packages/overlay/index.ts b/packages/overlay/index.ts index fe717805..12745a8a 100644 --- a/packages/overlay/index.ts +++ b/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,