feat(ActionSheet): add icon support to the actions data (#12671)

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 <Icon class={bem('item-icon')} name={action.icon} />;
+      }
+    };
+
     const renderActionContent = (action: ActionSheetAction, index: number) => {
       if (action.loading) {
         return <Loading class={bem('loading-icon')} />;
@@ -135,6 +142,7 @@ export default defineComponent({
           class={[bem('item', { loading, disabled }), className]}
           onClick={onClick}
         >
+          {renderIcon(action)}
           {renderActionContent(action, index)}
         </button>
       );

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
+<van-cell is-link title="Show Icon" @click="show = true" />
+<van-action-sheet v-model:show="show" :actions="actions" @select="onSelect" />
+```
+
+```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                        |
+| Key | Description | Type |
-| --------- | ------------------------------- | --------------------------- |
+| --- | --- | --- |
-| name      | Title                           | _string_                    |
+| name | Title | _string_ |
-| subname   | Subtitle                        | _string_                    |
+| subname | Subtitle | _string_ |
-| color     | Text color                      | _string_                    |
+| color | Text color | _string_ |
-| className | className for the option        | _string \| Array \| object_ |
+| icon `v4.8.6` | Icon name or URL | _string_ |
-| loading   | Whether to be loading status    | _boolean_                   |
+| className | className for the option | _string \| Array \| object_ |
-| disabled  | Whether to be disabled          | _boolean_                   |
+| loading | Whether to be loading status | _boolean_ |
-| callback  | Callback function after clicked | _action: ActionSheetAction_ |
+| 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)_ | - |

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

@@ -55,6 +55,41 @@ export default {
 };
 ```
 
+### 展示图标
+
+使用 `actions` 的 `icon` 字段可以为选项设置图标。
+
+```html
+<van-cell is-link title="展示图标" @click="show = true" />
+<van-action-sheet v-model:show="show" :actions="actions" @select="onSelect" />
+```
+
+```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_                    |
+| name          | 标题                     | _string_                    |
-| subname   | 二级标题                 | _string_                    |
+| subname       | 二级标题                 | _string_                    |
-| color     | 选项文字颜色             | _string_                    |
+| color         | 选项文字颜色             | _string_                    |
-| className | 为对应列添加额外的 class | _string \| Array \| object_ |
+| icon `v4.8.6` | 选项图标名称或图片链接   | _string_                    |
-| loading   | 是否为加载状态           | _boolean_                   |
+| className     | 为对应列添加额外的 class | _string \| Array \| object_ |
-| disabled  | 是否为禁用状态           | _boolean_                   |
+| loading       | 是否为加载状态           | _boolean_                   |
-| callback  | 点击时触发的回调函数     | _action: ActionSheetAction_ |
+| 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)_ | - |

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<ActionSheetAction[]>(() => [
   { name: t('option3') },
 ]);
 
+const iconActions = computed<ActionSheetAction[]>(() => [
+  { name: t('option1'), icon: 'cart-o' },
+  { name: t('option2'), icon: 'shop-o' },
+  { name: t('option3'), icon: 'star-o' },
+]);
+
 const statusActions = computed<ActionSheetAction[]>(() => [
   { 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'));
 </script>
 
 <template>
   <demo-block card :title="t('basicUsage')">
     <van-cell is-link :title="t('basicUsage')" @click="showBasic = true" />
+    <van-cell is-link :title="t('showIcon')" @click="showIcon = true" />
     <van-cell is-link :title="t('showCancel')" @click="showCancel = true" />
     <van-cell
       is-link
@@ -92,6 +107,12 @@ const onCancel = () => showToast(t('cancel'));
     @select="onSelect"
   />
 
+  <van-action-sheet
+    v-model:show="showIcon"
+    :actions="iconActions"
+    @select="onSelectIcon"
+  />
+
   <van-action-sheet
     v-model:show="showCancel"
     :actions="simpleActions"

packages/vant/src/action-sheet/index.less

@@ -13,6 +13,8 @@
   --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);
@@ -40,7 +42,10 @@
 
   &__item,
   &__cancel {
-    display: block;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
     width: 100%;
     padding: 14px var(--van-padding-md);
     font-size: var(--van-action-sheet-item-font-size);
@@ -72,6 +77,11 @@
     &--loading {
       cursor: default;
     }
+
+    &--icon {
+      font-size: var(--van-action-sheet-item-icon-size);
+      margin-right: var(--van-action-sheet-item-icon-margin-right);
+    }
   }
 
   &__cancel {
@@ -81,10 +91,12 @@
   }
 
   &__subname {
+    width: 100%;
     margin-top: var(--van-padding-xs);
     color: var(--van-action-sheet-subname-color);
     font-size: var(--van-action-sheet-subname-font-size);
     line-height: var(--van-action-sheet-subname-line-height);
+    overflow-wrap: break-word;
   }
 
   &__gap {

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

@@ -24,6 +24,26 @@ exports[`should render demo and match snapshot 1`] = `
       <!--[-->
     </i>
   </div>
+  <div
+    class="van-cell van-cell--clickable"
+    role="button"
+    tabindex="0"
+  >
+    <div
+      class="van-cell__title"
+      style
+    >
+      <span>
+        Show Icon
+      </span>
+    </div>
+    <i
+      class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon"
+      style
+    >
+      <!--[-->
+    </i>
+  </div>
   <div
     class="van-cell van-cell--clickable"
     role="button"
@@ -116,4 +136,5 @@ exports[`should render demo and match snapshot 1`] = `
 <!--[-->
 <!--[-->
 <!--[-->
+<!--[-->
 `;

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

@@ -15,6 +15,19 @@ exports[`should render demo and match snapshot 1`] = `
     <i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
     </i>
   </div>
+  <div
+    class="van-cell van-cell--clickable"
+    role="button"
+    tabindex="0"
+  >
+    <div class="van-cell__title">
+      <span>
+        Show Icon
+      </span>
+    </div>
+    <i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
+    </i>
+  </div>
   <div
     class="van-cell van-cell--clickable"
     role="button"
@@ -152,4 +165,20 @@ exports[`should render demo and match snapshot 1`] = `
   css="true"
 >
 </transition-stub>
+<transition-stub
+  name="van-fade"
+  appear="true"
+  persisted="false"
+  css="true"
+  role="button"
+  tabindex="0"
+>
+</transition-stub>
+<transition-stub
+  name="van-popup-slide-bottom"
+  appear="false"
+  persisted="false"
+  css="true"
+>
+</transition-stub>
 `;