GridItem Attributes

GridItem Attributes

参数	说明	类型	可选值	默认值	最低版本
value	图标右上角 badge 显示值	string | number	-	-	-

并添加使用示例：

```html
<!-- 数字类型 -->
<wd-grid-item value="10" icon="cart" text="购物车" />

<!-- 字符串类型 -->
<wd-grid-item value="New" icon="notification" text="通知" />

<!-- 特殊符号 -->
<wd-grid-item value="!" icon="alert" text="警告" />

最佳实践：Grid组件value属性全场景指南

1. 数字类型使用场景

当需要显示数量或计数时，使用数字类型：

<!-- 未读消息数 -->
<wd-grid-item value="24" icon="message" text="消息" />

<!-- 数量统计 -->
<wd-grid-item :value="128" :max="99" icon="download" text="下载" />

2. 字符串类型使用场景

需要显示文本标签或特殊符号时，使用字符串类型：

<!-- 状态标签 -->
<wd-grid-item value="Hot" icon="trending" text="热门" />

<!-- 特殊标记 -->
<wd-grid-item value="●" icon="dot" text="提示" />

3. 与max属性的协同使用

当value为数字且超过max值时，将显示{max}+：

<!-- 显示"99+" -->
<wd-grid-item :value="126" :max="99" icon="notification" text="通知" />

注意：当value为字符串时，max属性无效。

4. TypeScript环境下的类型安全

在TypeScript项目中，建议使用类型断言确保类型正确：

// 字符串类型
const badgeText = 'New' as const
<wd-grid-item :value="badgeText" icon="notification" text="通知" />

// 数字类型
const badgeCount = 24 as const
<wd-grid-item :value="badgeCount" icon="message" text="消息" />

总结与展望

本次Grid组件value属性的类型问题，暴露了组件库开发中"类型定义-文档-测试"协调一致的重要性。通过优化numericProp的类型定义、完善测试用例、更新文档描述，我们从根本上解决了这一类型矛盾。

未来组件库开发将：

1. 建立更严格的类型审查机制，确保TypeScript定义的准确性
2. 完善类型测试，在单元测试中加入类型验证
3. 开发自动化工具，检查文档与代码的一致性

这一修复已合并至v1.12.5版本，开发者可通过更新组件库获得类型增强：

npm update wot-design-uni