feat(ActionSheet): add option slot (#10065)

packages/vant/src/action-sheet/ActionSheet.tsx

@@ -94,18 +94,23 @@ export default defineComponent({
       }
     };
 
-    const renderOption = (item: ActionSheetAction, index: number) => {
-      const { name, color, subname, loading, callback, disabled, className } =
-        item;
+    const renderOptionContent = (action: ActionSheetAction, index: number) => {
+      if (action.loading) {
+        return <Loading class={bem('loading-icon')} />;
+      }
 
-      const Content = loading ? (
-        <Loading class={bem('loading-icon')} />
-      ) : (
-        [
-          <span class={bem('name')}>{name}</span>,
-          subname && <div class={bem('subname')}>{subname}</div>,
-        ]
-      );
+      if (slots.option) {
+        return slots.option({ action, index });
+      }
+
+      return [
+        <span class={bem('name')}>{action.name}</span>,
+        action.subname && <div class={bem('subname')}>{action.subname}</div>,
+      ];
+    };
+
+    const renderOption = (action: ActionSheetAction, index: number) => {
+      const { color, loading, callback, disabled, className } = action;
 
       const onClick = () => {
         if (disabled || loading) {
@@ -113,14 +118,14 @@ export default defineComponent({
         }
 
         if (callback) {
-          callback(item);
+          callback(action);
         }
 
         if (props.closeOnClickAction) {
           updateShow(false);
         }
 
-        nextTick(() => emit('select', item, index));
+        nextTick(() => emit('select', action, index));
       };
 
       return (
@@ -130,7 +135,7 @@ export default defineComponent({
           class={[bem('item', { loading, disabled }), className]}
           onClick={onClick}
         >
-          {Content}
+          {renderOptionContent(action, index)}
         </button>
       );
     };

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

@@ -218,11 +218,12 @@ export default {
 
 ### Slots
 
-| Name             | Description                          |
-| ---------------- | ------------------------------------ |
-| default          | Custom content                       |
-| description      | Custom description above the options |
-| cancel `v3.0.10` | Custom the content of cancel button  |
+| Name | Description | SlotProps |
+| --- | --- | --- |
+| default | Custom content |
+| description | Custom description above the options |
+| cancel `v3.0.10` | Custom the content of cancel button |
+| option `v3.3.8` | Custom the content of option | _{ action: Action, index: number }_ |
 
 ### Types
 

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

@@ -230,11 +230,12 @@ export default {
 
 ### Slots
 
-| 名称             | 说明                 |
-| ---------------- | -------------------- |
-| default          | 自定义面板的展示内容 |
-| description      | 自定义描述文案       |
-| cancel `v3.0.10` | 自定义取消按钮内容   |
+| 名称 | 说明 | 参数 |
+| --- | --- | --- |
+| default | 自定义面板的展示内容 | - |
+| description | 自定义描述文案 | - |
+| cancel `v3.0.10` | 自定义取消按钮内容 | - |
+| option `v3.3.8` | 自定义选项内容 | _{ action: Action, index: number }_ |
 
 ### 类型定义
 

packages/vant/src/action-sheet/test/__snapshots__/index.spec.ts.snap

@@ -44,6 +44,14 @@ exports[`should render description slot when match snapshot 1`] = `
 </div>
 `;
 
+exports[`should render option slot correctly 1`] = `
+<button type="button"
+        class="van-action-sheet__item"
+>
+  name: Option, index: 0
+</button>
+`;
+
 exports[`should render subname correctly 1`] = `
 <button type="button"
         class="van-action-sheet__item"

packages/vant/src/action-sheet/test/index.spec.ts

@@ -261,3 +261,17 @@ test('should allow to control safe-area with safe-area-inset-bottom prop', async
     'van-safe-area-bottom'
   );
 });
+
+test('should render option slot correctly', () => {
+  const wrapper = mount(ActionSheet, {
+    props: {
+      show: true,
+      actions: [{ name: 'Option' }],
+    },
+    slots: {
+      option: ({ action, index }) => `name: ${action.name}, index: ${index}`,
+    },
+  });
+
+  expect(wrapper.find('.van-action-sheet__item').html()).toMatchSnapshot();
+});