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,