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

@@ -49,6 +49,7 @@ export default defineComponent({
     round: Boolean,
     closeable: Boolean,
     transition: String,
+    iconPrefix: String,
     closeOnPopstate: Boolean,
     safeAreaInsetBottom: Boolean,
     position: {
@@ -131,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}
@@ -155,6 +157,7 @@ export default defineComponent({
             tabindex={0}
             name={props.closeIcon}
             class={bem('close-icon', props.closeIconPosition)}
+            classPrefix={props.iconPrefix}
             onClick={onClickCloseIcon}
           />
         );

src/popup/README.md

@@ -136,6 +136,7 @@ export default {
 | closeable | Whether to show close icon | _boolean_ | `false` |
 | close-icon | Close icon name | _string_ | `cross` |
 | close-icon-position | Close Icon Position，can be set to `top-left` `bottom-left` `bottom-right` | _string_ | `top-right` |
+| icon-prefix `v3.0.18` | Icon className prefix | _string_ | `van-icon` |
 | transition | Transition, equivalent to `name` prop of [transition](https://v3.vuejs.org/api/built-in-components.html#transition) | _string_ | - |
 | transition-appear | Whether to apply transition on initial render | _boolean_ | `false` |
 | teleport | Return the mount node for Popup | _string \| Element_ | - |
@@ -153,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

@@ -140,6 +140,7 @@ export default {
 | closeable | 是否显示关闭图标 | _boolean_ | `false` |
 | close-icon | 关闭[图标名称](#/zh-CN/icon)或图片链接 | _string_ | `cross` |
 | close-icon-position | 关闭图标位置，可选值为 `top-left`<br>`bottom-left` `bottom-right` | _string_ | `top-right` |
+| icon-prefix `v3.0.18` | 图标类名前缀，同 Icon 组件的 [class-prefix 属性](#/zh-CN/icon#props) | _string_ | `van-icon` |
 | transition | 动画类名，等价于 [transition](https://v3.cn.vuejs.org/api/built-in-components.html#transition) 的 `name` 属性 | _string_ | - |
 | transition-appear | 是否在初始渲染时启用过渡动画 | _boolean_ | `false` |
 | teleport | 指定挂载的节点 | _string \| Element_ | - |
@@ -157,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

@@ -1,5 +1,21 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`should change icon class prefix when using icon-prefix prop 1`] = `
+<transition-stub>
+  <div class="van-overlay">
+  </div>
+</transition-stub>
+<transition-stub>
+  <div class="van-popup van-popup--center">
+    <i class="van-badge__wrapper my-icon my-icon-cross van-popup__close-icon van-popup__close-icon--top-right"
+       role="button"
+       tabindex="0"
+    >
+    </i>
+  </div>
+</transition-stub>
+`;
+
 exports[`should render correct close icon when using close-icon prop 1`] = `
 <i class="van-badge__wrapper van-icon van-icon-success van-popup__close-icon van-popup__close-icon--top-right"
    role="button"
@@ -7,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

@@ -189,3 +189,28 @@ test('should render correct close icon when using close-icon prop', () => {
 
   expect(wrapper.find('.van-popup__close-icon').html()).toMatchSnapshot();
 });
+
+test('should change icon class prefix when using icon-prefix prop', () => {
+  const wrapper = mount(Popup, {
+    props: {
+      show: true,
+      closeable: true,
+      iconPrefix: 'my-icon',
+    },
+  });
+
+  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();
+});