From 1bc497f3b39ee76db5cf1be7e98f319e08f4904d Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Tue, 1 Jun 2021 19:22:50 +0800
Subject: [PATCH] feat(Popup): add overlay-content slot (#8794)

---
 src/calendar/test/prop.spec.ts                  |  2 +-
 src/popup/Popup.tsx                             |  1 +
 src/popup/README.md                             |  7 +++++++
 src/popup/README.zh-CN.md                       |  7 +++++++
 src/popup/test/__snapshots__/index.spec.js.snap | 12 ++++++++++++
 src/popup/test/index.spec.js                    | 13 +++++++++++++
 6 files changed, 41 insertions(+), 1 deletion(-)

diff --git a/src/calendar/test/prop.spec.ts b/src/calendar/test/prop.spec.ts
index f85a3e5f0..d14ef4c1f 100644
--- a/src/calendar/test/prop.spec.ts
+++ b/src/calendar/test/prop.spec.ts
@@ -202,7 +202,7 @@ test('month-show event', async () => {
       show: true,
     },
   });
-  await later(100);
+  await later(200);
 
   expect(wrapper.emitted('month-show')).toBeTruthy();
 });
diff --git a/src/popup/Popup.tsx b/src/popup/Popup.tsx
index 80aff52ae..5a9062ebe 100644
--- a/src/popup/Popup.tsx
+++ b/src/popup/Popup.tsx
@@ -132,6 +132,7 @@ export default defineComponent({
       if (props.overlay) {
         return (
           <Overlay
+            v-slots={{ default: slots['overlay-content'] }}
             show={props.show}
             class={props.overlayClass}
             zIndex={zIndex.value}
diff --git a/src/popup/README.md b/src/popup/README.md
index d21673a2c..5cb3bdb39 100644
--- a/src/popup/README.md
+++ b/src/popup/README.md
@@ -154,6 +154,13 @@ export default {
 | opened           | Emitted when Popup is opened       | -                   |
 | closed           | Emitted when Popup is closed       | -                   |
 
+### Slots
+
+| Name                      | Description              |
+| ------------------------- | ------------------------ |
+| default                   | Content of Popup         |
+| overlay-content `v3.0.18` | Content of Popup overlay |
+
 ### Less Variables
 
 How to use: [Custom Theme](#/en-US/theme).
diff --git a/src/popup/README.zh-CN.md b/src/popup/README.zh-CN.md
index e9001c363..e5e063ec9 100644
--- a/src/popup/README.zh-CN.md
+++ b/src/popup/README.zh-CN.md
@@ -158,6 +158,13 @@ export default {
 | opened           | 打开弹出层且动画结束后触发 | -                   |
 | closed           | 关闭弹出层且动画结束后触发 | -                   |
 
+### Slots
+
+| 名称                      | 说明         |
+| ------------------------- | ------------ |
+| default                   | 弹窗内容     |
+| overlay-content `v3.0.18` | 遮罩层的内容 |
+
 ### 样式变量
 
 组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
diff --git a/src/popup/test/__snapshots__/index.spec.js.snap b/src/popup/test/__snapshots__/index.spec.js.snap
index 1cdce8f0b..33f1a12a4 100644
--- a/src/popup/test/__snapshots__/index.spec.js.snap
+++ b/src/popup/test/__snapshots__/index.spec.js.snap
@@ -23,3 +23,15 @@ exports[`should render correct close icon when using close-icon prop 1`] = `
 >
 </i>
 `;
+
+exports[`should render overlay-content slot correctly 1`] = `
+<transition-stub>
+  <div class="van-overlay">
+    Custom Overlay Content
+  </div>
+</transition-stub>
+<transition-stub>
+  <div class="van-popup van-popup--center">
+  </div>
+</transition-stub>
+`;
diff --git a/src/popup/test/index.spec.js b/src/popup/test/index.spec.js
index 6e9dd78ba..b914ab1f3 100644
--- a/src/popup/test/index.spec.js
+++ b/src/popup/test/index.spec.js
@@ -201,3 +201,16 @@ test('should change icon class prefix when using icon-prefix prop', () => {
 
   expect(wrapper.html()).toMatchSnapshot();
 });
+
+test('should render overlay-content slot correctly', () => {
+  const wrapper = mount(Popup, {
+    props: {
+      show: true,
+    },
+    slots: {
+      'overlay-content': () => 'Custom Overlay Content',
+    },
+  });
+
+  expect(wrapper.html()).toMatchSnapshot();
+});