feat(TabbarItem): add badge-props prop (#10092)

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

@@ -202,6 +202,7 @@ export default {
 | 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');
+});