feat(Popover): add action slot (#10091)

packages/vant/src/action-sheet/README.md

@@ -223,7 +223,7 @@ export default {
 | default | Custom content |
 | description | Custom description above the options |
 | cancel `v3.0.10` | Custom the content of cancel button |
-| action `v3.3.8` | Custom the content of option | _{ action: Action, index: number }_ |
+| action `v3.3.8` | Custom the content of action | _{ action: ActionSheetAction, index: number }_ |
 
 ### Types
 

packages/vant/src/action-sheet/README.zh-CN.md

@@ -235,7 +235,7 @@ export default {
 | default | 自定义面板的展示内容 | - |
 | description | 自定义描述文案 | - |
 | cancel `v3.0.10` | 自定义取消按钮内容 | - |
-| action `v3.3.8` | 自定义选项内容 | _{ action: Action, index: number }_ |
+| action `v3.3.8` | 自定义选项内容 | _{ action: ActionSheetAction, index: number }_ |
 
 ### 类型定义
 

packages/vant/src/popover/Popover.tsx

@@ -166,8 +166,25 @@ export default defineComponent({
       }
     };
 
+    const renderActionContent = (action: PopoverAction, index: number) => {
+      if (slots.action) {
+        return slots.action({ action, index });
+      }
+
+      return [
+        action.icon && (
+          <Icon
+            name={action.icon}
+            classPrefix={props.iconPrefix}
+            class={bem('action-icon')}
+          />
+        ),
+        <div class={[bem('action-text'), BORDER_BOTTOM]}>{action.text}</div>,
+      ];
+    };
+
     const renderAction = (action: PopoverAction, index: number) => {
-      const { icon, text, color, disabled, className } = action;
+      const { icon, color, disabled, className } = action;
       return (
         <div
           role="menuitem"
@@ -177,14 +194,7 @@ export default defineComponent({
           aria-disabled={disabled || undefined}
           onClick={() => onClickAction(action, index)}
         >
-          {icon && (
+          {renderActionContent(action, index)}
-            <Icon
-              name={icon}
-              classPrefix={props.iconPrefix}
-              class={bem('action-icon')}
-            />
-          )}
-          <div class={[bem('action-text'), BORDER_BOTTOM]}>{text}</div>
         </div>
       );
     };

packages/vant/src/popover/README.md

@@ -250,10 +250,11 @@ export default {
 
 ### Slots
 
-| Name      | Description       |
+| Name | Description | SlotProps |
-| --------- | ----------------- |
+| --- | --- | --- |
-| default   | Custom content    |
+| default | Custom content | - |
-| reference | Reference Element |
+| reference | Reference Element | - |
+| action `v3.3.8` | Custom the content of option | _{ action: PopoverAction, index: number }_ |
 
 ### Types
 

packages/vant/src/popover/README.zh-CN.md

@@ -262,10 +262,11 @@ export default {
 
 ### Slots
 
-| 名称      | 说明                        |
+| 名称 | 说明 | 参数 |
-| --------- | --------------------------- |
+| --- | --- | --- |
-| default   | 自定义菜单内容              |
+| default | 自定义菜单内容 | - |
-| reference | 触发 Popover 显示的元素内容 |
+| reference | 触发 Popover 显示的元素内容 | - |
+| action `v3.3.8` | 自定义选项内容 | _{ action: PopoverAction, index: number }_ |
 
 ### 类型定义
 

packages/vant/src/popover/demo/index.vue

@@ -1,14 +1,14 @@
 <script setup lang="ts">
-import VanPopover from '..';
+import { ref } from 'vue';
+import VanPopover, { PopoverPlacement } from '..';
 import VanButton from '../../button';
 import VanField from '../../field';
 import VanPopup from '../../popup';
 import VanPicker from '../../picker';
 import VanGrid from '../../grid';
 import VanGridItem from '../../grid-item';
-import { ref } from 'vue';
-import { useTranslate } from '../../../docs/site/use-translate';
 import { Toast } from '../../toast';
+import { useTranslate } from '../../../docs/site/use-translate';
 
 const t = useTranslate({
   'zh-CN': {
@@ -83,9 +83,9 @@ const show = ref({
   disableAction: false,
 });
 const showPicker = ref(false);
-const currentPlacement = ref('top');
+const currentPlacement = ref<PopoverPlacement>('top');
 
-const onPickerChange = (value: string) => {
+const onPickerChange = (value: PopoverPlacement) => {
   setTimeout(() => {
     show.value.placement = true;
     currentPlacement.value = value;

packages/vant/src/popover/test/__snapshots__/index.spec.tsx.snap

@@ -72,6 +72,15 @@ exports[`should locate to reference element when showed 3`] = `
 </transition-stub>
 `;
 
+exports[`should render action slot correctly 1`] = `
+<div role="menuitem"
+     class="van-popover__action"
+     tabindex="0"
+>
+  name: Text, index: 0
+</div>
+`;
+
 exports[`should watch placement prop and update location 1`] = `
 <transition-stub>
   <div style="z-index: 2008; position: absolute; left: 0px; top: -108px; margin: 0px;"

packages/vant/src/popover/test/index.spec.tsx

@@ -212,3 +212,18 @@ test('should allow to hide arrow', () => {
 
   expect(wrapper.find('.van-popover__arrow').exists()).toBeFalsy();
 });
+
+test('should render action slot correctly', () => {
+  const wrapper = mount(Popover, {
+    props: {
+      show: true,
+      actions: [{ text: 'Text' }],
+      teleport: null,
+    },
+    slots: {
+      action: ({ action, index }) => `name: ${action.text}, index: ${index}`,
+    },
+  });
+
+  expect(wrapper.find('.van-popover__action').html()).toMatchSnapshot();
+});