feat(Popup): add overlay-content slot (#8794)

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();
 });

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}

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).

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)。

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>
+`;

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();
+});