diff --git a/packages/vant/src/action-sheet/ActionSheet.tsx b/packages/vant/src/action-sheet/ActionSheet.tsx index 5816d07f2..08e73a56e 100644 --- a/packages/vant/src/action-sheet/ActionSheet.tsx +++ b/packages/vant/src/action-sheet/ActionSheet.tsx @@ -20,6 +20,7 @@ import { popupSharedProps, popupSharedPropKeys } from '../popup/shared'; const [name, bem] = createNamespace('action-sheet'); export type ActionSheetAction = { + icon?: string; name?: string; color?: string; subname?: string; @@ -94,6 +95,12 @@ export default defineComponent({ } }; + const renderIcon = (action: ActionSheetAction) => { + if (action.icon) { + return ; + } + }; + const renderActionContent = (action: ActionSheetAction, index: number) => { if (action.loading) { return ; @@ -135,6 +142,7 @@ export default defineComponent({ class={[bem('item', { loading, disabled }), className]} onClick={onClick} > + {renderIcon(action)} {renderActionContent(action, index)} ); diff --git a/packages/vant/src/action-sheet/README.md b/packages/vant/src/action-sheet/README.md index 5dae39b2b..319f0efaf 100644 --- a/packages/vant/src/action-sheet/README.md +++ b/packages/vant/src/action-sheet/README.md @@ -53,6 +53,41 @@ export default { }; ``` +### Show Icon + +Use the `icon` field of `actions` to set the icon for the option. + +```html + + +``` + +```js +import { ref } from 'vue'; +import { showToast } from 'vant'; + +export default { + setup() { + const show = ref(false); + const actions = [ + { name: 'Option 1', icon: 'cart-o' }, + { name: 'Option 2', icon: 'shop-o' }, + { name: 'Option 3', icon: 'star-o' }, + ]; + const onSelect = (item) => { + show.value = false; + showToast(item.name); + }; + + return { + show, + actions, + onSelect, + }; + }, +}; +``` + ### Show Cancel Button ```html @@ -195,15 +230,16 @@ export default { ### Data Structure of ActionSheetAction -| Key | Description | Type | -| --------- | ------------------------------- | --------------------------- | -| name | Title | _string_ | -| subname | Subtitle | _string_ | -| color | Text color | _string_ | -| className | className for the option | _string \| Array \| object_ | -| loading | Whether to be loading status | _boolean_ | -| disabled | Whether to be disabled | _boolean_ | -| callback | Callback function after clicked | _action: ActionSheetAction_ | +| Key | Description | Type | +| --- | --- | --- | +| name | Title | _string_ | +| subname | Subtitle | _string_ | +| color | Text color | _string_ | +| icon `v4.8.6` | Icon name or URL | _string_ | +| className | className for the option | _string \| Array \| object_ | +| loading | Whether to be loading status | _boolean_ | +| disabled | Whether to be disabled | _boolean_ | +| callback | Callback function after clicked | _action: ActionSheetAction_ | ### Events @@ -253,6 +289,8 @@ The component provides the following CSS variables, which can be used to customi | --van-action-sheet-item-line-height | _var(--van-line-height-lg)_ | - | | --van-action-sheet-item-text-color | _var(--van-text-color)_ | - | | --van-action-sheet-item-disabled-text-color | _var(--van-text-color-3)_ | - | +| --van-action-sheet-item-icon-size | _18px_ | - | +| --van-action-sheet-item-icon-margin-right | _var(--van-padding-xs)_ | - | | --van-action-sheet-subname-color | _var(--van-text-color-2)_ | - | | --van-action-sheet-subname-font-size | _var(--van-font-size-sm)_ | - | | --van-action-sheet-subname-line-height | _var(--van-line-height-sm)_ | - | diff --git a/packages/vant/src/action-sheet/README.zh-CN.md b/packages/vant/src/action-sheet/README.zh-CN.md index fc09a7d11..128f8f811 100644 --- a/packages/vant/src/action-sheet/README.zh-CN.md +++ b/packages/vant/src/action-sheet/README.zh-CN.md @@ -55,6 +55,41 @@ export default { }; ``` +### 展示图标 + +使用 `actions` 的 `icon` 字段可以为选项设置图标。 + +```html + + +``` + +```js +import { ref } from 'vue'; +import { showToast } from 'vant'; + +export default { + setup() { + const show = ref(false); + const actions = [ + { name: '选项一', icon: 'cart-o' }, + { name: '选项二', icon: 'shop-o' }, + { name: '选项三', icon: 'star-o' }, + ]; + const onSelect = (item) => { + show.value = false; + showToast(item.name); + }; + + return { + show, + actions, + onSelect, + }; + }, +}; +``` + ### 展示取消按钮 设置 `cancel-text` 属性后，会在底部展示取消按钮，点击后关闭当前面板并触发 `cancel` 事件。 @@ -207,15 +242,16 @@ export default { `actions` 属性是一个由对象构成的数组，数组中的每个对象配置一列，对象可以包含以下值： -| 键名 | 说明 | 类型 | -| --------- | ------------------------ | --------------------------- | -| name | 标题 | _string_ | -| subname | 二级标题 | _string_ | -| color | 选项文字颜色 | _string_ | -| className | 为对应列添加额外的 class | _string \| Array \| object_ | -| loading | 是否为加载状态 | _boolean_ | -| disabled | 是否为禁用状态 | _boolean_ | -| callback | 点击时触发的回调函数 | _action: ActionSheetAction_ | +| 键名 | 说明 | 类型 | +| ------------- | ------------------------ | --------------------------- | +| name | 标题 | _string_ | +| subname | 二级标题 | _string_ | +| color | 选项文字颜色 | _string_ | +| icon `v4.8.6` | 选项图标名称或图片链接 | _string_ | +| className | 为对应列添加额外的 class | _string \| Array \| object_ | +| loading | 是否为加载状态 | _boolean_ | +| disabled | 是否为禁用状态 | _boolean_ | +| callback | 点击时触发的回调函数 | _action: ActionSheetAction_ | ### Events @@ -265,6 +301,8 @@ import type { ActionSheetProps, ActionSheetAction } from 'vant'; | --van-action-sheet-item-line-height | _var(--van-line-height-lg)_ | - | | --van-action-sheet-item-text-color | _var(--van-text-color)_ | - | | --van-action-sheet-item-disabled-text-color | _var(--van-text-color-3)_ | - | +| --van-action-sheet-item-icon-size | _18px_ | - | +| --van-action-sheet-item-icon-margin-right | _var(--van-padding-xs)_ | - | | --van-action-sheet-subname-color | _var(--van-text-color-2)_ | - | | --van-action-sheet-subname-font-size | _var(--van-font-size-sm)_ | - | | --van-action-sheet-subname-line-height | _var(--van-line-height-sm)_ | - | diff --git a/packages/vant/src/action-sheet/demo/index.vue b/packages/vant/src/action-sheet/demo/index.vue index af0a8c5cb..f297e5b12 100644 --- a/packages/vant/src/action-sheet/demo/index.vue +++ b/packages/vant/src/action-sheet/demo/index.vue @@ -11,6 +11,7 @@ const t = useTranslate({ option2: '选项二', option3: '选项三', subname: '描述信息', + showIcon: '展示图标', showCancel: '展示取消按钮', buttonText: '弹出菜单', customPanel: '自定义面板', @@ -25,6 +26,7 @@ const t = useTranslate({ option2: 'Option 2', option3: 'Option 3', subname: 'Description', + showIcon: 'Show Icon', showCancel: 'Show Cancel Button', buttonText: 'Show ActionSheet', customPanel: 'Custom Panel', @@ -36,6 +38,7 @@ const t = useTranslate({ }, }); const showBasic = ref(false); +const showIcon = ref(false); const showCancel = ref(false); const showTitle = ref(false); const showStatus = ref(false); @@ -47,6 +50,12 @@ const simpleActions = computed(() => [ { name: t('option3') }, ]); +const iconActions = computed(() => [ + { name: t('option1'), icon: 'cart-o' }, + { name: t('option2'), icon: 'shop-o' }, + { name: t('option3'), icon: 'star-o' }, +]); + const statusActions = computed(() => [ { name: t('coloredOption'), color: '#ee0a24' }, { name: t('disabledOption'), disabled: true }, @@ -64,12 +73,18 @@ const onSelect = (item: ActionSheetAction) => { showToast(item.name); }; +const onSelectIcon = (item: ActionSheetAction) => { + showIcon.value = false; + showToast(item.name); +}; + const onCancel = () => showToast(t('cancel'));