From c553551578c563c253491232fced28e7c55cc345 Mon Sep 17 00:00:00 2001
From: chenjiahan <chenjiahan@youzan.com>
Date: Thu, 14 Jan 2021 21:13:04 +0800
Subject: [PATCH] feat(Toast): add overlayStyle option #7898

---
 src/popup/index.js           |  2 +-
 src/toast/README.md          |  1 +
 src/toast/README.zh-CN.md    |  1 +
 src/toast/Toast.js           |  2 ++
 src/toast/test/index.spec.js | 17 +++++++++++++++++
 types/toast.d.ts             |  1 +
 6 files changed, 23 insertions(+), 1 deletion(-)
 create mode 100644 src/toast/test/index.spec.js

diff --git a/src/popup/index.js b/src/popup/index.js
index 2caf3bdbf..ba96b795c 100644
--- a/src/popup/index.js
+++ b/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}
           />
         );
diff --git a/src/toast/README.md b/src/toast/README.md
index 863b878ba..09bd7254b 100644
--- a/src/toast/README.md
+++ b/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` |
diff --git a/src/toast/README.zh-CN.md b/src/toast/README.zh-CN.md
index 63bc97cd5..67c4d7f60 100644
--- a/src/toast/README.zh-CN.md
+++ b/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` |
diff --git a/src/toast/Toast.js b/src/toast/Toast.js
index 89b304e76..f68b3d7b3 100644
--- a/src/toast/Toast.js
+++ b/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}
       >
diff --git a/src/toast/test/index.spec.js b/src/toast/test/index.spec.js
new file mode 100644
index 000000000..837149c2d
--- /dev/null
+++ b/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');
+});
diff --git a/types/toast.d.ts b/types/toast.d.ts
index 9ef6c35ca..6ddc56cc6 100644
--- a/types/toast.d.ts
+++ b/types/toast.d.ts
@@ -22,6 +22,7 @@ export type ToastOptions = {
   loadingType?: ToastLoadingType;
   forbidClick?: boolean;
   closeOnClick?: boolean;
+  overlayStyle?: Record<string, any>;
   closeOnClickOverlay?: boolean;
 };