diff --git a/packages/vant/src/grid-item/GridItem.tsx b/packages/vant/src/grid-item/GridItem.tsx index 6d2d72f74..41f41848f 100644 --- a/packages/vant/src/grid-item/GridItem.tsx +++ b/packages/vant/src/grid-item/GridItem.tsx @@ -1,6 +1,7 @@ import { computed, defineComponent, + type PropType, type CSSProperties, type ExtractPropTypes, } from 'vue'; @@ -21,7 +22,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('grid-item'); @@ -32,6 +33,7 @@ const gridItemProps = extend({}, routeProps, { badge: numericProp, iconColor: String, iconPrefix: String, + badgeProps: Object as PropType>, }); export type GridItemProps = ExtractPropTypes; @@ -93,6 +95,7 @@ export default defineComponent({ v-slots={{ default: slots.icon }} dot={props.dot} content={props.badge} + {...props.badgeProps} /> ); } @@ -105,8 +108,9 @@ export default defineComponent({ size={parent.props.iconSize} badge={props.badge} class={bem('icon')} - classPrefix={props.iconPrefix} color={props.iconColor} + badgeProps={props.badgeProps} + classPrefix={props.iconPrefix} /> ); } diff --git a/packages/vant/src/grid/README.md b/packages/vant/src/grid/README.md index 7ae014218..16e01ddf6 100644 --- a/packages/vant/src/grid/README.md +++ b/packages/vant/src/grid/README.md @@ -124,6 +124,7 @@ app.use(GridItem); | reverse `v3.1.0` | Whether to reverse the position of icon and text | _boolean_ | `false` | | 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_ | - | | 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` | diff --git a/packages/vant/src/grid/README.zh-CN.md b/packages/vant/src/grid/README.zh-CN.md index 4049176f6..ee3a88412 100644 --- a/packages/vant/src/grid/README.zh-CN.md +++ b/packages/vant/src/grid/README.zh-CN.md @@ -140,6 +140,7 @@ app.use(GridItem); | reverse `v3.1.0` | 是否调换图标和文本的位置 | _boolean_ | `false` | | 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` | diff --git a/packages/vant/src/grid/test/index.spec.js b/packages/vant/src/grid/test/index.spec.js index 1372740f2..535dcbbf5 100644 --- a/packages/vant/src/grid/test/index.spec.js +++ b/packages/vant/src/grid/test/index.spec.js @@ -74,3 +74,18 @@ test('should render ".van-grid-item__content--reverse" class when using reverse 'van-grid-item__content--reverse' ); }); + +test('should render badge-props prop correctly', async () => { + const wrapper = mount({ + render() { + return ( + + + + ); + }, + }); + + const badge = wrapper.find('.van-badge'); + expect(badge.style.backgroundColor).toEqual('blue'); +});