feat(GridItem): add badge-props prop (#10097)

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<Partial<BadgeProps>>,
 });
 
 export type GridItemProps = ExtractPropTypes<typeof gridItemProps>;
@@ -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}
           />
         );
       }

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

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

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 (
+        <Grid>
+          <GridItem icon="foo" badge={1} badgeProps={{ color: 'blue' }} />
+        </Grid>
+      );
+    },
+  });
+
+  const badge = wrapper.find('.van-badge');
+  expect(badge.style.backgroundColor).toEqual('blue');
+});