feat(SidebarItem): add badge-props prop (#10106)

packages/vant/src/sidebar-item/SidebarItem.tsx

@@ -1,4 +1,4 @@
-import { defineComponent, type ExtractPropTypes } from 'vue';
+import { defineComponent, type PropType, type ExtractPropTypes } from 'vue';
 
 // Utils
 import { extend, numericProp, createNamespace } from '../utils';
@@ -9,7 +9,7 @@ import { useParent } from '@vant/use';
 import { useRoute, routeProps } from '../composables/use-route';
 
 // Components
-import { Badge } from '../badge';
+import { Badge, type BadgeProps } from '../badge';
 
 const [name, bem] = createNamespace('sidebar-item');
 
@@ -18,6 +18,7 @@ const sidebarItemProps = extend({}, routeProps, {
   title: String,
   badge: numericProp,
   disabled: Boolean,
+  badgeProps: Object as PropType<Partial<BadgeProps>>,
 });
 
 export type SidebarItemProps = ExtractPropTypes<typeof sidebarItemProps>;
@@ -64,7 +65,12 @@ export default defineComponent({
           aria-selected={selected}
           onClick={onClick}
         >
-          <Badge dot={dot} content={badge} class={bem('text')}>
+          <Badge
+            dot={dot}
+            class={bem('text')}
+            content={badge}
+            {...props.badgeProps}
+          >
             {slots.title ? slots.title() : title}
           </Badge>
         </div>

packages/vant/src/sidebar/README.md

@@ -107,6 +107,7 @@ export default {
 | title | Content | _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_ | - |
 | disabled | Whether to be disabled | _boolean_ | `false` |
 | url | Link | _string_ | - |
 | to | Target route of the link, same as to of vue-router | _string \| object_ | - |

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

@@ -115,6 +115,7 @@ export default {
 | title | 内容 | _string_ | `''` |
 | dot | 是否显示右上角小红点 | _boolean_ | `false` |
 | badge | 图标右上角徽标的内容 | _number \| string_ | - |
+| badge-props `v3.2.8` | 自定义徽标的属性，传入的对象会被透传给 [Badge 组件的 props](#/zh-CN/badge#props) | _BadgeProps_ | - |
 | disabled | 是否禁用该项 | _boolean_ | `false` |
 | url | 点击后跳转的链接地址 | _string_ | - |
 | to | 点击后跳转的目标路由对象，等同于 vue-router 的 [to 属性](https://router.vuejs.org/zh/api/#to) | _string \| object_ | - |

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

@@ -104,3 +104,18 @@ test('should render title slot correctly', () => {
 
   expect(wrapper.html()).toMatchSnapshot();
 });
+
+test('should render badge-props correctly', () => {
+  const wrapper = mount({
+    render() {
+      return (
+        <Sidebar>
+          <SidebarItem badge={1} badgeProps={{ color: 'blue' }} />
+        </Sidebar>
+      );
+    },
+  });
+
+  const badge = wrapper.find('.van-badge');
+  expect(badge.style.backgroundColor).toEqual('blue');
+});