feat(Dialog): add overlay-style prop (#2140)

packages/dialog/README.md

@@ -143,8 +143,9 @@ Page({
 | showCancelButton | 是否展示取消按钮 | *boolean* | `false` | - |
 | confirmButtonText | 确认按钮的文案 | *string* | `确认` | - |
 | cancelButtonText | 取消按钮的文案 | *string* | `取消` | - |
-| overlay | 是否展示蒙层 | *boolean* | `true` | - |
-| closeOnClickOverlay | 点击蒙层时是否关闭弹窗 | *boolean* | `false` | - |
+| overlay | 是否展示遮罩层 | *boolean* | `true` | - |
+| overlayStyle | 自定义遮罩层样式 | *object* | - | 1.0.0 |
+| closeOnClickOverlay | 点击遮罩层时是否关闭弹窗 | *boolean* | `false` | - |
 | asyncClose | 是否异步关闭弹窗，开启后需要手动控制弹窗的关闭 | *boolean* | `false` | - |
 | context | 选择器的选择范围，可以传入自定义组件的 this 作为上下文 | *object* | 当前页面 | - |
 | transition | 动画名称，可选值为`fade` `none` | *string* | `scale` | - |
@@ -177,15 +178,16 @@ Page({
 | message-align | 内容对齐方式，可选值为`left` `right` | *string* | `center` |
 | z-index | z-index 层级 | *number* | `100` |
 | class-name | 自定义类名，dialog在自定义组件内时无效 | *string* | '' |
-| customStyle | 自定义样式 | *string* | '' |
+| custom-style | 自定义样式 | *string* | '' |
 | show-confirm-button | 是否展示确认按钮 | *boolean* |  `true` |
 | show-cancel-button | 是否展示取消按钮 | *boolean* |  `false` |
 | confirm-button-text | 确认按钮的文案 | *string* |  `确认` |
 | cancel-button-text | 取消按钮的文案 | *string* | `取消` |
 | confirm-button-color | 确认按钮的字体颜色 | *string* |  `#1989fa` |
 | cancel-button-color | 取消按钮的字体颜色 | *string* | `#333` |
-| overlay | 是否展示蒙层 | *boolean* | `true` |
-| close-on-click-overlay | 点击蒙层时是否关闭弹窗 | *boolean* | `false` |
+| overlay | 是否展示遮罩层 | *boolean* | `true` |
+| overlay-style | 自定义遮罩层样式 | *object* | - | 1.0.0 |
+| close-on-click-overlay | 点击遮罩层时是否关闭弹窗 | *boolean* | `false` |
 | use-slot | 是否使用自定义内容的插槽 | *boolean* | `false` |
 | use-title-slot | 是否使用自定义标题的插槽 | *boolean* | `false` |
 | async-close | 是否异步关闭弹窗，开启后需要手动控制弹窗的关闭 | *boolean* | `false` |

packages/dialog/dialog.ts

@@ -17,6 +17,7 @@ type DialogOptions = {
   asyncClose?: boolean;
   businessId?: number;
   sessionFrom?: string;
+  overlayStyle?: string;
   appParameter?: string;
   messageAlign?: string;
   sendMessageImg?: string;
@@ -81,12 +82,13 @@ Dialog.defaultOptions = {
   message: '',
   zIndex: 100,
   overlay: true,
-  className: '',
-  customStyle: '',
-  asyncClose: false,
-  messageAlign: '',
-  transition: 'scale',
   selector: '#van-dialog',
+  className: '',
+  asyncClose: false,
+  transition: 'scale',
+  customStyle: '',
+  messageAlign: '',
+  overlayStyle: '',
   confirmButtonText: '确认',
   cancelButtonText: '取消',
   showConfirmButton: true,

packages/dialog/index.ts

@@ -17,6 +17,7 @@ VantComponent({
     customStyle: String,
     asyncClose: Boolean,
     messageAlign: String,
+    overlayStyle: String,
     useTitleSlot: Boolean,
     showCancelButton: Boolean,
     closeOnClickOverlay: Boolean,

packages/dialog/index.wxml

@@ -2,9 +2,10 @@
   show="{{ show }}"
   z-index="{{ zIndex }}"
   overlay="{{ overlay }}"
-  custom-class="van-dialog {{ className }}"
   transition="{{ transition }}"
+  custom-class="van-dialog {{ className }}"
   custom-style="{{ customStyle }}"
+  overlay-style="{{ overlayStyle }}"
   close-on-click-overlay="{{ closeOnClickOverlay }}"
   bind:close="onClickOverlay"
 >

packages/popup/README.md

@@ -116,7 +116,7 @@ Page({
 | duration | 动画时长，单位为毫秒 | *number \| object* | `300` | - |
 | round | 是否显示圆角 | *boolean* | `false` | - |
 | custom-style | 自定义弹出层样式 | *string* | `` | - |
-| overlay-style | 自定义背景蒙层样式 | *string* | `` | - |
+| overlay-style | 自定义遮罩层样式 | *string* | `` | - |
 | close-on-click-overlay | 是否在点击遮罩层后关闭 | *boolean* | `true` | - |
 | closeable | 是否显示关闭图标 | *boolean* | `false` | - |
 | close-icon | 关闭图标名称或图片链接 | *string* | `cross` | - |

packages/toast/README.md

@@ -90,7 +90,7 @@ const timer = setInterval(() => {
 | type | 提示类型，可选值为 `loading` `success` `fail` `html` | *string* | `text` | - |
 | position | 位置，可选值为 `top` `middle` `bottom` | *string* | `middle` | - |
 | message | 内容 | *string* | `''` | - | - |
-| mask | 是否显示背景蒙层 | *boolean* | `false` | - |
+| mask | 是否显示遮罩层 | *boolean* | `false` | - |
 | forbidClick | 是否禁止背景点击 | *boolean* | `false` | - |
 | loadingType | 加载图标类型, 可选值为 `spinner` | *string* | `circular` | - |
 | zIndex | z-index 层级 | *number* | `1000` | - |