feat(Toast): add overlayStyle option #7898

src/popup/index.js

@@ -168,9 +168,9 @@ export default createComponent({
           <Overlay
             show={props.show}
             class={props.overlayClass}
-            style={props.overlayStyle}
             zIndex={zIndex.value}
             duration={props.duration}
+            customStyle={props.overlayStyle}
             onClick={onClickOverlay}
           />
         );

src/toast/README.md

@@ -161,6 +161,7 @@ Toast.resetDefaultOptions('loading');
 | loadingType | Loading icon type, can be set to `spinner` | _string_ | `circular` |
 | duration | Toast duration(ms), won't disappear if value is 0 | _number_ | `2000` |
 | className | Custom className | _any_ | - |
+| overlayStyle `v3.0.4` | Custom overlay style | _object_ | - |
 | onOpened | Callback function after opened | _Function_ | - |
 | onClose | Callback function after close | _Function_ | - |
 | transition | Transition, equivalent to `name` prop of [transtion](https://v3.vuejs.org/api/built-in-components.html#transition) | _string_ | `van-fade` |

src/toast/README.zh-CN.md

@@ -174,6 +174,7 @@ Toast.resetDefaultOptions('loading');
 | loadingType | [加载图标类型](#/zh-CN/loading), 可选值为 `spinner` | _string_ | `circular` |
 | duration | 展示时长(ms)，值为 0 时，toast 不会消失 | _number_ | `2000` |
 | className | 自定义类名 | _any_ | - |
+| overlayStyle `v3.0.4` | 自定义遮罩层样式 | _object_ | - |
 | onOpened | 完全展示后的回调函数 | _Function_ | - |
 | onClose | 关闭时的回调函数 | _Function_ | - |
 | transition | 动画类名，等价于 [transtion](https://v3.cn.vuejs.org/api/built-in-components.html#transition) 的`name`属性 | _string_ | `van-fade` |

src/toast/Toast.js

@@ -22,6 +22,7 @@ export default createComponent({
     lockScroll: Boolean,
     loadingType: String,
     forbidClick: Boolean,
+    overlayStyle: Object,
     closeOnClick: Boolean,
     type: {
       type: String,
@@ -115,6 +116,7 @@ export default createComponent({
         ]}
         lockScroll={false}
         transition={props.transition}
+        overlayStyle={props.overlayStyle}
         onClick={onClick}
         onClosed={clearTimer}
       >

src/toast/test/index.spec.js

@@ -0,0 +1,17 @@
+import Toast from '../Toast';
+import { mount } from '@vue/test-utils';
+import { later } from '../../../test';
+
+test('should change overlay style after using overlay-style prop', async () => {
+  const wrapper = mount(Toast, {
+    props: {
+      show: true,
+      overlayStyle: {
+        background: 'red',
+      },
+    },
+  });
+
+  await later();
+  expect(wrapper.find('.van-overlay').element.style.background).toEqual('red');
+});

types/toast.d.ts

@@ -22,6 +22,7 @@ export type ToastOptions = {
   loadingType?: ToastLoadingType;
   forbidClick?: boolean;
   closeOnClick?: boolean;
+  overlayStyle?: Record<string, any>;
   closeOnClickOverlay?: boolean;
 };