diff --git a/packages/vant/src/sidebar-item/SidebarItem.tsx b/packages/vant/src/sidebar-item/SidebarItem.tsx index 366d2fec9..d619d9afa 100644 --- a/packages/vant/src/sidebar-item/SidebarItem.tsx +++ b/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>, }); export type SidebarItemProps = ExtractPropTypes; @@ -64,7 +65,12 @@ export default defineComponent({ aria-selected={selected} onClick={onClick} > - + {slots.title ? slots.title() : title} diff --git a/packages/vant/src/sidebar/README.md b/packages/vant/src/sidebar/README.md index e4d3db180..ad3189cdd 100644 --- a/packages/vant/src/sidebar/README.md +++ b/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_ | - | diff --git a/packages/vant/src/sidebar/README.zh-CN.md b/packages/vant/src/sidebar/README.zh-CN.md index c5fac308d..443505612 100644 --- a/packages/vant/src/sidebar/README.zh-CN.md +++ b/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_ | - | diff --git a/packages/vant/src/sidebar/test/index.spec.tsx b/packages/vant/src/sidebar/test/index.spec.tsx index 68afeb8d7..44d68c4f4 100644 --- a/packages/vant/src/sidebar/test/index.spec.tsx +++ b/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 ( + + + + ); + }, + }); + + const badge = wrapper.find('.van-badge'); + expect(badge.style.backgroundColor).toEqual('blue'); +});