diff --git a/packages/vant/src/action-sheet/ActionSheet.tsx b/packages/vant/src/action-sheet/ActionSheet.tsx
index 23ee7cae8..a87ff0cce 100644
--- a/packages/vant/src/action-sheet/ActionSheet.tsx
+++ b/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 ;
+ }
- const Content = loading ? (
-
- ) : (
- [
- {name},
- subname &&
{subname}
,
- ]
- );
+ if (slots.option) {
+ return slots.option({ action, index });
+ }
+
+ return [
+ {action.name},
+ action.subname && {action.subname}
,
+ ];
+ };
+
+ 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)}
);
};
diff --git a/packages/vant/src/action-sheet/README.md b/packages/vant/src/action-sheet/README.md
index 81f75d4d5..025c889ba 100644
--- a/packages/vant/src/action-sheet/README.md
+++ b/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
diff --git a/packages/vant/src/action-sheet/README.zh-CN.md b/packages/vant/src/action-sheet/README.zh-CN.md
index 423ac36ed..9e2e2d425 100644
--- a/packages/vant/src/action-sheet/README.zh-CN.md
+++ b/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 }_ |
### 类型定义
diff --git a/packages/vant/src/action-sheet/test/__snapshots__/index.spec.ts.snap b/packages/vant/src/action-sheet/test/__snapshots__/index.spec.ts.snap
index 4de50d3d3..e791b3afb 100644
--- a/packages/vant/src/action-sheet/test/__snapshots__/index.spec.ts.snap
+++ b/packages/vant/src/action-sheet/test/__snapshots__/index.spec.ts.snap
@@ -44,6 +44,14 @@ exports[`should render description slot when match snapshot 1`] = `
`;
+exports[`should render option slot correctly 1`] = `
+
+`;
+
exports[`should render subname correctly 1`] = `