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

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` |