feat(Overlay): use custom-style instead of mask (#1994)

example/config.js

@@ -95,6 +95,10 @@ export default [
         path: '/notify',
         title: 'Notify 消息通知'
       },
+      {
+        path: '/overlay',
+        title: 'Overlay 遮罩层'
+      },
       {
         path: '/swipe-cell',
         title: 'SwipeCell 滑动单元格'
@@ -102,10 +106,6 @@ export default [
       {
         path: '/toast',
         title: 'Toast 轻提示'
-      },
-      {
-        path: '/overlay',
-        title: 'Overlay 遮罩层'
       }
     ]
   },

example/pages/overlay/index.wxml

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

packages/common/style/var.less

@@ -88,6 +88,9 @@
 @notify-font-size: 14px;
 @notify-line-height: 20px;
 
+// Overlay
+@overlay-background-color: rgba(0, 0, 0, 0.7);
+
 // Popup
 @popup-round-border-radius: 12px;
 @popup-close-icon-size: 18px;

packages/overlay/README.md

@@ -1,6 +1,11 @@
 # Overlay 遮罩层
 
+### 介绍
+
+创建一个遮罩层，用于强调特定的页面元素，并阻止用户进行其他操作
+
 ### 引入
+
 在`app.json`或`index.json`中引入组件，默认为`ES6`版本，`ES5`引入方式参见[快速上手](#/quickstart)
 
 ```json
@@ -9,13 +14,12 @@
 }
 ```
 
-
 ## 代码演示
 
 ### 基础用法
 
 ```html
-<van-button bind:click="onClickShow">显示遮罩层</van-button>
+<van-button type="primary" bind:click="onClickShow">显示遮罩层</van-button>
 <van-overlay show="{{ show }}" bind:click="onClickHide"/>
 ```
 
@@ -35,16 +39,16 @@ Page({
 
 ### 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* | - | - |
+| custom-style | 自定义样式 | *string* | - | - |
 
 ### Events
 
 | 事件名 | 说明 | 回调参数 |
 |-----------|-----------|-----------|
-| bind:click | 点击时触发 | - |
+| bind:click | 点击时触发 | - |

packages/overlay/index.less

@@ -1,7 +1,8 @@
 .van-overlay {
   position: fixed;
   top: 0;
-  right: 0;
-  bottom: 0;
   left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: @overlay-background-color;
 }

packages/overlay/index.ts

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

packages/overlay/index.wxml

@@ -1,7 +1,7 @@
 <van-transition
   show="{{ show }}"
   custom-class="van-overlay"
-  custom-style="z-index: {{ zIndex }}; {{ mask ? 'background-color: rgba(0, 0, 0, .7);' : '' }}; {{ customStyle }}"
+  custom-style="z-index: {{ zIndex }}; {{ customStyle }}"
   duration="{{ duration }}"
   bind:tap="onClick"
   catch:touchmove="noop"

packages/popup/index.wxml

@@ -2,7 +2,6 @@
 
 <van-overlay
   wx:if="{{ overlay }}"
-  mask
   show="{{ show }}"
   z-index="{{ zIndex }}"
   custom-style="{{ overlayStyle }}"

packages/toast/index.wxml

@@ -1,8 +1,8 @@
 <van-overlay
   wx:if="{{ mask || forbidClick }}"
   show="{{ show }}"
-  mask="{{ mask }}"
   z-index="{{ zIndex }}"
+  custom-style="{{ mask ? '' : 'background-color: transparent;' }}"
 />
 <van-transition
   show="{{ show }}"