feat(ActionBarIcon): add badge-props prop (#10096)

* docs: update icon prop description

* docs: update

packages/vant-cli/site/common/style/highlight.less

@@ -21,7 +21,7 @@ pre {
   margin: 20px 0 0;
 
   + p {
-    margin-top: 20px;
+    margin-top: 20px !important;
   }
 }
 

packages/vant/src/action-bar-icon/ActionBarIcon.tsx

@@ -1,4 +1,4 @@
-import { defineComponent, type ExtractPropTypes } from 'vue';
+import { defineComponent, type PropType, type ExtractPropTypes } from 'vue';
 import { extend, createNamespace, unknownProp, numericProp } from '../utils';
 import { ACTION_BAR_KEY } from '../action-bar/ActionBar';
 
@@ -8,7 +8,7 @@ import { useRoute, routeProps } from '../composables/use-route';
 
 // Components
 import { Icon } from '../icon';
-import { Badge } from '../badge';
+import { Badge, type BadgeProps } from '../badge';
 
 const [name, bem] = createNamespace('action-bar-icon');
 
@@ -19,6 +19,7 @@ const actionBarIconProps = extend({}, routeProps, {
   color: String,
   badge: numericProp,
   iconClass: unknownProp,
+  badgeProps: Object as PropType<Partial<BadgeProps>>,
   iconPrefix: String,
 });
 
@@ -35,15 +36,17 @@ export default defineComponent({
     useParent(ACTION_BAR_KEY);
 
     const renderIcon = () => {
-      const { dot, badge, icon, color, iconClass, iconPrefix } = props;
+      const { dot, badge, icon, color, iconClass, badgeProps, iconPrefix } =
+        props;
 
       if (slots.icon) {
         return (
           <Badge
             v-slots={{ default: slots.icon }}
             dot={dot}
-            content={badge}
             class={bem('icon')}
+            content={badge}
+            {...badgeProps}
           />
         );
       }
@@ -56,6 +59,7 @@ export default defineComponent({
           badge={badge}
           color={color}
           class={[bem('icon'), iconClass]}
+          badgeProps={badgeProps}
           classPrefix={iconPrefix}
         />
       );

packages/vant/src/action-bar-icon/test/index.spec.ts

@@ -59,3 +59,17 @@ test('should render icon slot with dot correctly', () => {
 
   expect(wrapper.html()).toMatchSnapshot();
 });
+
+test('should render badge-props prop correctly', async () => {
+  const wrapper = mount(ActionBarIcon, {
+    props: {
+      badge: 1,
+      badgeProps: {
+        color: 'blue',
+      },
+    },
+  });
+
+  const badge = wrapper.find('.van-badge');
+  expect(badge.style.backgroundColor).toEqual('blue');
+});

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

@@ -102,7 +102,8 @@ Use `badge` prop to show badge in icon.
 | icon-prefix `v3.0.17` | Icon className prefix | _string_ | `van-icon` |
 | dot | Whether to show red dot | _boolean_ | - |
 | badge | Content of the badge | _number \| string_ | - |
-| url | Link | _string_ | - |
+| badge-props `v3.2.8` | Props of Badge，see [Badge - props](#/en-US/badge#props) | _BadgeProps_ | - |
+| url | Link URL | _string_ | - |
 | to | Target route of the link, same as to of vue-router | _string \| object_ | - |
 | replace | If true, the navigation will not leave a history record | _boolean_ | `false` |
 

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

@@ -106,6 +106,7 @@ export default {
 | icon-prefix `v3.0.17` | 图标类名前缀，等同于 Icon 组件的 [class-prefix 属性](#/zh-CN/icon#props) | _string_ | `van-icon` |
 | dot | 是否显示图标右上角小红点 | _boolean_ | `false` |
 | badge | 图标右上角徽标的内容 | _number \| string_ | - |
+| badge-props `v3.2.8` | 自定义徽标的属性，传入的对象会被透传给 [Badge 组件的 props](#/zh-CN/badge#props) | _BadgeProps_ | - |
 | url | 点击后跳转的链接地址 | _string_ | - |
 | to | 点击后跳转的目标路由对象，等同于 vue-router 的 [to 属性](https://router.vuejs.org/zh/api/#to) | _string \| object_ | - |
 | replace | 是否在跳转时替换当前页面历史 | _boolean_ | `false` |
@@ -117,7 +118,7 @@ export default {
 | text | 按钮文字 | _string_ | - |
 | type | 按钮类型，可选值为 `primary` `info` `warning` `danger` | _string_ | `default` |
 | color | 按钮颜色，支持传入 `linear-gradient` 渐变色 | _string_ | - |
-| icon | 左侧[图标名称](#/zh-CN/icon)或图片链接 | _string_ | - |
+| icon | 左侧图标名称或图片链接，等同于 Icon 组件的 [name 属性](#/zh-CN/icon#props) | _string_ | - |
 | disabled | 是否禁用按钮 | _boolean_ | `false` |
 | loading | 是否显示为加载状态 | _boolean_ | `false` |
 | url | 点击后跳转的链接地址 | _string_ | - |

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

@@ -187,7 +187,7 @@ export default {
 | cancel-text | 取消按钮文字 | _string_ | - |
 | description | 选项上方的描述信息 | _string_ | - |
 | closeable | 是否显示关闭图标 | _boolean_ | `true` |
-| close-icon | 关闭[图标名称](#/zh-CN/icon)或图片链接 | _string_ | `cross` |
+| close-icon | 关闭图标名称或图片链接，等同于 Icon 组件的 [name 属性](#/zh-CN/icon#props) | _string_ | `cross` |
 | duration | 动画时长，单位秒，设置为 0 可以禁用动画 | _number \| string_ | `0.3` |
 | round | 是否显示圆角 | _boolean_ | `true` |
 | overlay | 是否显示遮罩层 | _boolean_ | `true` |
@@ -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/button/README.zh-CN.md

@@ -138,7 +138,7 @@ app.use(Button);
 | size | 尺寸，可选值为 `large` `small` `mini` | _string_ | `normal` |
 | text | 按钮文字 | _string_ | - |
 | color | 按钮颜色，支持传入 `linear-gradient` 渐变色 | _string_ | - |
-| icon | 左侧[图标名称](#/zh-CN/icon)或图片链接 | _string_ | - |
+| icon | 左侧图标名称或图片链接，等同于 Icon 组件的 [name 属性](#/zh-CN/icon#props) | _string_ | - |
 | icon-prefix | 图标类名前缀，等同于 Icon 组件的 [class-prefix 属性](#/zh-CN/icon#props) | _string_ | `van-icon` |
 | icon-position | 图标展示位置，可选值为 `right` | _string_ | `left` |
 | tag | 按钮根节点的 HTML 标签 | _string_ | `button` |

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

@@ -263,7 +263,7 @@ export default {
 | active-color | 选中状态的高亮颜色 | _string_ | `#ee0a24` |
 | swipeable `v3.0.11` | 是否开启手势左右滑动切换 | _boolean_ | `false` |
 | closeable | 是否显示关闭图标 | _boolean_ | `true` |
-| close-icon `v3.0.10` | 关闭[图标名称](#/zh-CN/icon)或图片链接 | _string_ | `cross` |
+| close-icon `v3.0.10` | 关闭图标名称或图片链接，等同于 Icon 组件的 [name 属性](#/zh-CN/icon#props) | _string_ | `cross` |
 | field-names `v3.0.4` | 自定义 `options` 结构中的字段 | _object_ | `{ text: 'text', value: 'value', children: 'children' }` |
 
 ### CascaderOption 数据结构

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

@@ -157,7 +157,7 @@ app.use(CellGroup);
 | value | 右侧内容 | _number \| string_ | - |
 | label | 标题下方的描述信息 | _string_ | - |
 | size | 单元格大小，可选值为 `large` | _string_ | - |
-| icon | 左侧[图标名称](#/zh-CN/icon)或图片链接 | _string_ | - |
+| icon | 左侧图标名称或图片链接，等同于 Icon 组件的 [name 属性](#/zh-CN/icon#props) | _string_ | - |
 | icon-prefix | 图标类名前缀，等同于 Icon 组件的 [class-prefix 属性](#/zh-CN/icon#props) | _string_ | `van-icon` |
 | url | 点击后跳转的链接地址 | _string_ | - |
 | to | 点击后跳转的目标路由对象，等同于 vue-router 的 [to 属性](https://router.vuejs.org/zh/api/#to) | _string \| object_ | - |

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

@@ -145,7 +145,7 @@ export default {
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
 | name | 唯一标识符，默认为索引值 | _number \| string_ | `index` |
-| icon | 标题栏左侧[图标名称](#/zh-CN/icon)或图片链接 | _string_ | - |
+| icon | 标题栏左侧图标名称或图片链接，等同于 Icon 组件的 [name 属性](#/zh-CN/icon#props) | _string_ | - |
 | size | 标题栏大小，可选值为 `large` | _string_ | - |
 | title | 标题栏左侧内容 | _number \| string_ | - |
 | value | 标题栏右侧内容 | _number \| string_ | - |

packages/vant/src/dropdown-menu/README.zh-CN.md

@@ -222,11 +222,11 @@ dropdownItemRef.value?.toggle();
 
 ### Option 数据结构
 
-| 键名  | 说明                                   | 类型               |
-| ----- | -------------------------------------- | ------------------ |
-| text  | 文字                                   | _string_           |
-| value | 标识符                                 | _number \| string_ |
-| icon  | 左侧[图标名称](#/zh-CN/icon)或图片链接 | _string_           |
+| 键名 | 说明 | 类型 |
+| --- | --- | --- |
+| text | 文字 | _string_ |
+| value | 标识符 | _number \| string_ |
+| icon | 左侧图标名称或图片链接，等同于 Icon 组件的 [name 属性](#/zh-CN/icon#props) | _string_ |
 
 ## 主题定制
 

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

@@ -281,7 +281,7 @@ export default {
 | required | 是否显示表单必填星号 | _boolean_ | `false` |
 | center | 是否使内容垂直居中 | _boolean_ | `false` |
 | clearable | 是否启用清除图标，点击清除图标后会清空输入框 | _boolean_ | `false` |
-| clear-icon `v3.0.12` | 清除[图标名称](#/zh-CN/icon)或图片链接 | _string_ | `clear` |
+| clear-icon `v3.0.12` | 清除图标名称或图片链接，等同于 Icon 组件的 [name 属性](#/zh-CN/icon#props) | _string_ | `clear` |
 | clear-trigger | 显示清除图标的时机，`always` 表示输入框不为空时展示，<br>`focus` 表示输入框聚焦且不为空时展示 | _FieldClearTrigger_ | `focus` |
 | clickable | 是否开启点击反馈 | _boolean_ | `false` |
 | is-link | 是否展示右侧箭头并开启点击反馈 | _boolean_ | `false` |
@@ -298,8 +298,8 @@ export default {
 | label-align | 左侧文本对齐方式，可选值为 `center` `right` | _FieldTextAlign_ | `left` |
 | input-align | 输入框对齐方式，可选值为 `center` `right` | _FieldTextAlign_ | `left` |
 | autosize | 是否自适应内容高度，只对 textarea 有效，<br>可传入对象,如 { maxHeight: 100, minHeight: 50 }，<br>单位为`px` | _boolean \| FieldAutosizeConfig_ | `false` |
-| left-icon | 左侧[图标名称](#/zh-CN/icon)或图片链接 | _string_ | - |
-| right-icon | 右侧[图标名称](#/zh-CN/icon)或图片链接 | _string_ | - |
+| left-icon | 左侧图标名称或图片链接，等同于 Icon 组件的 [name 属性](#/zh-CN/icon#props) | _string_ | - |
+| right-icon | 右侧图标名称或图片链接，等同于 Icon 组件的 [name 属性](#/zh-CN/icon#props) | _string_ | - |
 | icon-prefix | 图标类名前缀，等同于 Icon 组件的 [class-prefix 属性](#/zh-CN/icon#props) | _string_ | `van-icon` |
 | rules | 表单校验规则，详见 [Form 组件](#/zh-CN/form#rule-shu-ju-jie-gou) | _FieldRule[]_ | - |
 | autocomplete `v3.0.3` | input 标签原生的[自动完成属性](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) | _string_ | - |

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

@@ -134,7 +134,7 @@ app.use(GridItem);
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
 | text | 文字 | _string_ | - |
-| icon | [图标名称](#/zh-CN/icon)或图片链接 | _string_ | - |
+| icon | 图标名称或图片链接，等同于 Icon 组件的 [name 属性](#/zh-CN/icon#props) | _string_ | - |
 | icon-prefix | 图标类名前缀，等同于 Icon 组件的 [class-prefix 属性](#/zh-CN/icon#props) | _string_ | `van-icon` |
 | icon-color | 图标颜色，等同于 Icon 组件的 [color 属性](#/zh-CN/icon#props) | _string_ | - |
 | reverse `v3.1.0` | 是否调换图标和文本的位置 | _boolean_ | `false` |

packages/vant/src/icon/Icon.tsx

@@ -1,11 +1,17 @@
-import { inject, computed, defineComponent, type ExtractPropTypes } from 'vue';
+import {
+  inject,
+  computed,
+  defineComponent,
+  type PropType,
+  type ExtractPropTypes,
+} from 'vue';
 import {
   addUnit,
   numericProp,
   makeStringProp,
   createNamespace,
 } from '../utils';
-import { Badge } from '../badge';
+import { Badge, type BadgeProps } from '../badge';
 import { CONFIG_PROVIDER_KEY } from '../config-provider/ConfigProvider';
 
 const [name, bem] = createNamespace('icon');
@@ -19,6 +25,7 @@ const iconProps = {
   size: numericProp,
   badge: numericProp,
   color: String,
+  badgeProps: Object as PropType<Partial<BadgeProps>>,
   classPrefix: String,
 };
 
@@ -44,7 +51,6 @@ export default defineComponent({
         <Badge
           dot={dot}
           tag={tag}
-          content={badge}
           class={[
             classPrefix.value,
             isImageIcon ? '' : `${classPrefix.value}-${name}`,
@@ -53,6 +59,8 @@ export default defineComponent({
             color,
             fontSize: addUnit(size),
           }}
+          content={badge}
+          {...props.badgeProps}
         >
           {slots.default?.()}
           {isImageIcon && <img class={bem('image')} src={name} />}

packages/vant/src/icon/README.md

@@ -91,15 +91,16 @@ Use `size` prop to set icon size.
 
 ### Props
 
-| Attribute    | Description              | Type               | Default    |
-| ------------ | ------------------------ | ------------------ | ---------- |
-| name         | Icon name or URL         | _string_           | `''`       |
-| dot          | Whether to show red dot  | _boolean_          | `false`    |
-| badge        | Content of the badge     | _number \| string_ | `''`       |
-| color        | Icon color               | _string_           | `inherit`  |
-| size         | Icon size                | _number \| string_ | `inherit`  |
-| class-prefix | ClassName prefix         | _string_           | `van-icon` |
-| tag          | HTML Tag of root element | _string_           | `i`        |
+| Attribute | Description | Type | Default |
+| --- | --- | --- | --- |
+| name | Icon name or URL | _string_ | `''` |
+| dot | Whether to show red dot | _boolean_ | `false` |
+| badge | Content of the badge | _number \| string_ | `''` |
+| badge-props `v3.2.8` | Props of Badge，see [Badge - props](#/en-US/badge#props) | _BadgeProps_ | - |
+| color | Icon color | _string_ | `inherit` |
+| size | Icon size | _number \| string_ | `inherit` |
+| class-prefix | ClassName prefix | _string_ | `van-icon` |
+| tag | HTML Tag of root element | _string_ | `i` |
 
 ### Events
 

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

@@ -98,6 +98,7 @@ app.use(Icon);
 | name | 图标名称或图片链接 | _string_ | - |
 | dot | 是否显示图标右上角小红点 | _boolean_ | `false` |
 | badge | 图标右上角徽标的内容 | _number \| string_ | - |
+| badge-props `v3.2.8` | 自定义徽标的属性，传入的对象会被透传给 [Badge 组件的 props](#/zh-CN/badge#props) | _BadgeProps_ | - |
 | color | 图标颜色 | _string_ | `inherit` |
 | size | 图标大小，如 `20px` `2em`，默认单位为 `px` | _number \| string_ | `inherit` |
 | class-prefix | 类名前缀，用于使用自定义图标 | _string_ | `van-icon` |

packages/vant/src/icon/test/index.spec.ts

@@ -75,3 +75,17 @@ test('should change icon size when using size prop', () => {
   });
   expect(wrapper.style.fontSize).toEqual('20px');
 });
+
+test('should render badge-props prop correctly', async () => {
+  const wrapper = mount(Icon, {
+    props: {
+      badge: 1,
+      badgeProps: {
+        color: 'blue',
+      },
+    },
+  });
+
+  const badge = wrapper.find('.van-badge');
+  expect(badge.style.backgroundColor).toEqual('blue');
+});

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

@@ -111,8 +111,8 @@ app.use(Lazyload);
 | lazy-load | 是否开启图片懒加载，须配合 [Lazyload](#/zh-CN/lazyload) 组件使用 | _boolean_ | `false` |
 | show-error | 是否展示图片加载失败提示 | _boolean_ | `true` |
 | show-loading | 是否展示图片加载中提示 | _boolean_ | `true` |
-| error-icon | 失败时提示的[图标名称](#/zh-CN/icon)或图片链接 | _string_ | `photo-fail` |
-| loading-icon | 加载时提示的[图标名称](#/zh-CN/icon)或图片链接 | _string_ | `photo` |
+| error-icon | 失败时提示的图标名称或图片链接，等同于 Icon 组件的 [name 属性](#/zh-CN/icon#props) | _string_ | `photo-fail` |
+| loading-icon | 加载时提示的图标名称或图片链接，等同于 Icon 组件的 [name 属性](#/zh-CN/icon#props) | _string_ | `photo` |
 | icon-size `v3.0.11` | 加载图标和失败图标的大小 | _number \| string_ | `32px` |
 | icon-prefix | 图标类名前缀，等同于 Icon 组件的 [class-prefix 属性](#/zh-CN/icon#props) | _string_ | `van-icon` |
 

packages/vant/src/notice-bar/README.zh-CN.md

@@ -114,7 +114,7 @@ app.use(NoticeBar);
 | text | 通知文本内容 | _string_ | `''` |
 | color | 通知文本颜色 | _string_ | `#ed6a0c` |
 | background | 滚动条背景 | _string_ | `#fffbe8` |
-| left-icon | 左侧[图标名称](#/zh-CN/icon)或图片链接 | _string_ | - |
+| left-icon | 左侧图标名称或图片链接，等同于 Icon 组件的 [name 属性](#/zh-CN/icon#props) | _string_ | - |
 | delay | 动画延迟时间 (s) | _number \| string_ | `1` |
 | speed | 滚动速率 (px/s) | _number \| string_ | `60` |
 | scrollable | 是否开启滚动播放，内容长度溢出时默认开启 | _boolean_ | - |

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 && (
-            <Icon
-              name={icon}
-              classPrefix={props.iconPrefix}
-              class={bem('action-icon')}
-            />
-          )}
-          <div class={[bem('action-text'), BORDER_BOTTOM]}>{text}</div>
+          {renderActionContent(action, index)}
         </div>
       );
     };

packages/vant/src/popover/README.md

@@ -250,10 +250,11 @@ export default {
 
 ### Slots
 
-| Name      | Description       |
-| --------- | ----------------- |
-| default   | Custom content    |
-| reference | Reference Element |
+| Name | Description | SlotProps |
+| --- | --- | --- |
+| default | Custom content | - |
+| 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

@@ -114,7 +114,7 @@ bottom-end    # 底部右侧位置
 
 ### 展示图标
 
-在 `actions` 数组中，可以通过 `icon` 字段来定义选项的图标，支持传入[图标名称](#/zh-CN/icon)或图片链接。
+在 `actions` 数组中，可以通过 `icon` 字段来定义选项的图标，支持传入图标名称或图片链接，等同于 Icon 组件的 [name 属性](#/zh-CN/icon#props)。
 
 ```html
 <van-popover v-model:show="showPopover" :actions="actions">
@@ -244,7 +244,7 @@ export default {
 | 键名 | 说明 | 类型 |
 | --- | --- | --- |
 | text | 选项文字 | _string_ |
-| icon | 文字左侧的图标，支持传入[图标名称](#/zh-CN/icon)或图片链接 | _string_ |
+| icon | 文字左侧的图标，支持传入图标名称或图片链接，等同于 Icon 组件的 [name 属性](#/zh-CN/icon#props) | _string_ |
 | color | 选项文字颜色 | _string_ |
 | disabled | 是否为禁用状态 | _boolean_ |
 | className | 为对应选项添加额外的类名 | _string \| Array \| object_ |
@@ -262,10 +262,11 @@ export default {
 
 ### Slots
 
-| 名称      | 说明                        |
-| --------- | --------------------------- |
-| default   | 自定义菜单内容              |
-| reference | 触发 Popover 显示的元素内容 |
+| 名称 | 说明 | 参数 |
+| --- | --- | --- |
+| default | 自定义菜单内容 | - |
+| 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();
+});

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

@@ -124,7 +124,7 @@ export default {
 | close-on-popstate | 是否在页面回退时自动关闭 | _boolean_ | `false` |
 | close-on-click-overlay | 是否在点击遮罩层后关闭 | _boolean_ | `true` |
 | closeable | 是否显示关闭图标 | _boolean_ | `false` |
-| close-icon | 关闭[图标名称](#/zh-CN/icon)或图片链接 | _string_ | `cross` |
+| close-icon | 关闭图标名称或图片链接，等同于 Icon 组件的 [name 属性](#/zh-CN/icon#props) | _string_ | `cross` |
 | close-icon-position | 关闭图标位置，可选值为 `top-left`<br>`bottom-left` `bottom-right` | _string_ | `top-right` |
 | before-close `v3.1.4` | 关闭前的回调函数，返回 `false` 可阻止关闭，支持返回 Promise | _(action: string) => boolean \| Promise\<boolean\>_ | - |
 | icon-prefix `v3.0.18` | 图标类名前缀，等同于 Icon 组件的 [class-prefix 属性](#/zh-CN/icon#props) | _string_ | `van-icon` |

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

@@ -158,8 +158,8 @@ export default {
 | color | 选中时的颜色 | _string_ | `#ee0a24` |
 | void-color | 未选中时的颜色 | _string_ | `#c8c9cc` |
 | disabled-color | 禁用时的颜色 | _string_ | `#c8c9cc` |
-| icon | 选中时的[图标名称](#/zh-CN/icon)或图片链接 | _string_ | `star` |
-| void-icon | 未选中时的[图标名称](#/zh-CN/icon)或图片链接 | _string_ | `star-o` |
+| icon | 选中时的图标名称或图片链接，等同于 Icon 组件的 [name 属性](#/zh-CN/icon#props) | _string_ | `star` |
+| void-icon | 未选中时的图标名称或图片链接，等同于 Icon 组件的 [name 属性](#/zh-CN/icon#props) | _string_ | `star-o` |
 | icon-prefix | 图标类名前缀，等同于 Icon 组件的 [class-prefix 属性](#/zh-CN/icon#props) | _string_ | `van-icon` |
 | allow-half | 是否允许半选 | _boolean_ | `false` |
 | readonly | 是否为只读状态，只读状态下无法修改评分 | _boolean_ | `false` |

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

@@ -139,7 +139,7 @@ export default {
 | maxlength | 输入的最大字符数 | _number \| string_ | - |
 | placeholder | 占位提示文字 | _string_ | - |
 | clearable | 是否启用清除图标，点击清除图标后会清空输入框 | _boolean_ | `true` |
-| clear-icon `v3.0.12` | 清除[图标名称](#/zh-CN/icon)或图片链接 | _string_ | `clear` |
+| clear-icon `v3.0.12` | 清除图标名称或图片链接，等同于 Icon 组件的 [name 属性](#/zh-CN/icon#props) | _string_ | `clear` |
 | clear-trigger | 显示清除图标的时机，`always` 表示输入框不为空时展示，<br>`focus` 表示输入框聚焦且不为空时展示 | _string_ | `focus` |
 | autofocus | 是否自动聚焦，iOS 系统不支持该属性 | _boolean_ | `false` |
 | show-action | 是否在搜索框右侧显示取消按钮 | _boolean_ | `false` |
@@ -151,8 +151,8 @@ export default {
 | formatter `v3.0.12` | 输入内容格式化函数 | _(val: string) => string_ | - |
 | format-trigger `v3.0.12` | 格式化函数触发的时机，可选值为 `onBlur` | _string_ | `onChange` |
 | input-align | 输入框内容对齐方式，可选值为 `center` `right` | _string_ | `left` |
-| left-icon | 输入框左侧[图标名称](#/zh-CN/icon)或图片链接 | _string_ | `search` |
-| right-icon | 输入框右侧[图标名称](#/zh-CN/icon)或图片链接 | _string_ | - |
+| left-icon | 输入框左侧图标名称或图片链接，等同于 Icon 组件的 [name 属性](#/zh-CN/icon#props) | _string_ | `search` |
+| right-icon | 输入框右侧图标名称或图片链接，等同于 Icon 组件的 [name 属性](#/zh-CN/icon#props) | _string_ | - |
 | autocomplete `v3.2.3` | input 标签原生的[自动完成属性](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) | _string_ | - |
 
 ### Events

packages/vant/src/submit-bar/README.zh-CN.md

@@ -108,7 +108,7 @@ export default {
 | button-type | 按钮类型 | _string_ | `danger` |
 | button-color | 自定义按钮颜色 | _string_ | - |
 | tip | 在订单栏上方的提示文案 | _string_ | - |
-| tip-icon | 提示文案左侧的[图标名称](#/zh-CN/icon)或图片链接 | _string_ | - |
+| tip-icon | 提示文案左侧的图标名称或图片链接，等同于 Icon 组件的 [name 属性](#/zh-CN/icon#props) | _string_ | - |
 | currency | 货币符号 | _string_ | `¥` |
 | disabled | 是否禁用按钮 | _boolean_ | `false` |
 | loading | 是否显示将按钮显示为加载中状态 | _boolean_ | `false` |

packages/vant/src/tabbar-item/TabbarItem.tsx

@@ -2,6 +2,7 @@ import {
   computed,
   defineComponent,
   getCurrentInstance,
+  type PropType,
   type ExtractPropTypes,
 } from 'vue';
 
@@ -15,7 +16,7 @@ import { routeProps, useRoute } from '../composables/use-route';
 
 // Components
 import { Icon } from '../icon';
-import { Badge } from '../badge';
+import { Badge, type BadgeProps } from '../badge';
 
 const [name, bem] = createNamespace('tabbar-item');
 
@@ -24,6 +25,7 @@ const tabbarItemProps = extend({}, routeProps, {
   icon: String,
   name: numericProp,
   badge: numericProp,
+  badgeProps: Object as PropType<Partial<BadgeProps>>,
   iconPrefix: String,
 });
 
@@ -100,8 +102,9 @@ export default defineComponent({
           <Badge
             v-slots={{ default: renderIcon }}
             dot={dot}
-            content={badge}
             class={bem('icon')}
+            content={badge}
+            {...props.badgeProps}
           />
           <div class={bem('text')}>
             {slots.default?.({ active: active.value })}

packages/vant/src/tabbar/README.md

@@ -190,6 +190,7 @@ export default {
 | icon-prefix | Icon className prefix | _string_ | `van-icon` |
 | dot | Whether to show red dot | _boolean_ | - |
 | badge | Content of the badge | _number \| string_ | `''` |
+| badge-props `v3.2.8` | Props of Badge，see [Badge - props](#/en-US/badge#props) | _BadgeProps_ | - |
 | url | Link | _string_ | - |
 | to | Target route of the link, same as to of vue-router | _string \| object_ | - |
 | replace | If true, the navigation will not leave a history record | _boolean_ | `false` |

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

@@ -198,10 +198,11 @@ export default {
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
 | name | 标签名称，作为匹配的标识符 | _number \| string_ | 当前标签的索引值 |
-| icon | [图标名称](#/zh-CN/icon)或图片链接 | _string_ | - |
+| icon | 图标名称或图片链接，等同于 Icon 组件的 [name 属性](#/zh-CN/icon#props) | _string_ | - |
 | icon-prefix | 图标类名前缀，等同于 Icon 组件的 [class-prefix 属性](#/zh-CN/icon#props) | _string_ | `van-icon` |
 | dot | 是否显示图标右上角小红点 | _boolean_ | `false` |
 | badge | 图标右上角徽标的内容 | _number \| string_ | - |
+| badge-props `v3.2.8` | 自定义徽标的属性，传入的对象会被透传给 [Badge 组件的 props](#/zh-CN/badge#props) | _BadgeProps_ | - |
 | url | 点击后跳转的链接地址 | _string_ | - |
 | to | 点击后跳转的目标路由对象，等同于 vue-router 的 [to 属性](https://router.vuejs.org/zh/api/#to) | _string \| object_ | - |
 | replace | 是否在跳转时替换当前页面历史 | _boolean_ | `false` |

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

@@ -199,3 +199,21 @@ test('should render placeholder element when using placeholder prop', async () =
   expect(wrapper.html()).toMatchSnapshot();
   restore();
 });
+
+test('should render badge-props prop correctly', async () => {
+  const wrapper = mount({
+    render() {
+      return (
+        <Tabbar>
+          <TabbarItem badge={0} badgeProps={{ color: 'blue' }}>
+            Tab
+          </TabbarItem>
+        </Tabbar>
+      );
+    },
+  });
+
+  await nextTick();
+  const badge = wrapper.find('.van-badge');
+  expect(badge.style.backgroundColor).toEqual('blue');
+});

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

@@ -46,7 +46,7 @@ Toast.fail('失败文案');
 
 ### 自定义图标
 
-通过 `icon` 选项可以自定义图标，支持传入[图标名称](#/zh-CN/icon)或图片链接，通过`loadingType` 属性可以自定义加载图标类型。
+通过 `icon` 选项可以自定义图标，支持传入图标名称或图片链接，等同于 Icon 组件的 [name 属性](#/zh-CN/icon#props)。
 
 ```js
 Toast({
@@ -58,7 +58,11 @@ Toast({
   message: '自定义图片',
   icon: 'https://img.yzcdn.cn/vant/logo.png',
 });
+```
 
+通过`loadingType` 属性可以自定义加载图标类型。
+
+```js
 Toast.loading({
   message: '加载中...',
   forbidClick: true,
@@ -169,7 +173,7 @@ Toast.resetDefaultOptions('loading');
 | type | 提示类型，可选值为 `loading` `success`<br>`fail` `html` | _ToastType_ | `text` |
 | position | 位置，可选值为 `top` `bottom` | _ToastPosition_ | `middle` |
 | message | 文本内容，支持通过`\n`换行 | _string_ | `''` |
-| icon | 自定义图标，支持传入[图标名称](#/zh-CN/icon)或图片链接 | _string_ | - |
+| icon | 自定义图标，支持传入图标名称或图片链接，等同于 Icon 组件的 [name 属性](#/zh-CN/icon#props) | _string_ | - |
 | iconSize | 图标大小，如 `20px` `2em`，默认单位为 `px` | _number \| string_ | `36px` |
 | iconPrefix | 图标类名前缀，等同于 Icon 组件的 [class-prefix 属性](#/zh-CN/icon#props) | _string_ | `van-icon` |
 | overlay | 是否显示背景遮罩层 | _boolean_ | `false` |

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

@@ -333,7 +333,7 @@ export default {
 | result-type | 文件读取结果类型，可选值为 `file` `text` | _string_ | `dataUrl` |
 | upload-text | 上传区域文字提示 | _string_ | - |
 | image-fit | 预览图裁剪模式，可选值见 [Image](#/zh-CN/image) 组件 | _string_ | `cover` |
-| upload-icon | 上传区域[图标名称](#/zh-CN/icon)或图片链接 | _string_ | `photograph` |
+| upload-icon | 上传区域图标名称或图片链接，等同于 Icon 组件的 [name 属性](#/zh-CN/icon#props) | _string_ | `photograph` |
 
 > 注意：accept、capture 和 multiple 为浏览器 input 标签的原生属性，移动端各种机型对这些属性的支持程度有所差异，因此在不同机型和 WebView 下可能出现一些兼容性问题。