diff --git a/src/grid-item/index.js b/src/grid-item/index.js
index 0783718c7..aecb9e7be 100644
--- a/src/grid-item/index.js
+++ b/src/grid-item/index.js
@@ -1,5 +1,5 @@
// Utils
-import { createNamespace, addUnit } from '../utils';
+import { createNamespace, addUnit, isDef } from '../utils';
import { BORDER } from '../utils/constant';
import { route, routeProps } from '../utils/router';
@@ -22,6 +22,7 @@ export default createComponent({
icon: String,
iconPrefix: String,
info: [Number, String],
+ badge: [Number, String],
},
computed: {
@@ -70,12 +71,13 @@ export default createComponent({
genIcon() {
const iconSlot = this.slots('icon');
+ const info = isDef(this.badge) ? this.badge : this.info;
if (iconSlot) {
return (
{iconSlot}
-
+
);
}
@@ -85,7 +87,7 @@ export default createComponent({
```
-### Show Info
+### Show Badge
```html
-
+
```
@@ -118,7 +118,7 @@ Vue.use(GridItem);
| icon | Icon name or URL | *string* | - |
| icon-prefix `v2.5.3` | Icon className prefix | *string* | `van-icon` |
| dot `v2.2.1` | Whether to show red dot | *boolean* | `false` |
-| info `v2.2.1` | Content of the badge | *number \| string* | - |
+| badge `v2.5.6` | Content of the badge | *number \| string* | - |
| 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/src/grid/README.zh-CN.md b/src/grid/README.zh-CN.md
index 4e2035911..264ca7985 100644
--- a/src/grid/README.zh-CN.md
+++ b/src/grid/README.zh-CN.md
@@ -103,14 +103,14 @@ Vue.use(GridItem);
```
-### 提示信息
+### 徽标提示
-设置`dot`属性后,会在图标右上角展示一个小红点。设置`info`属性后,会在图标右上角展示相应的徽标
+设置`dot`属性后,会在图标右上角展示一个小红点。设置`badge`属性后,会在图标右上角展示相应的徽标
```html
-
+
```
@@ -136,7 +136,8 @@ Vue.use(GridItem);
| icon | [图标名称](#/zh-CN/icon)或图片链接 | *string* | - |
| icon-prefix `v2.5.3` | 图标类名前缀,同 Icon 组件的 [class-prefix 属性](#/zh-CN/icon#props) | *string* | `van-icon` |
| dot `v2.2.1` | 是否显示图标右上角小红点 | *boolean* | `false` |
-| info `v2.2.1` | 图标右上角徽标的内容 | *number \| string* | - |
+| badge `v2.5.6` | 图标右上角徽标的内容 | *number \| string* | - |
+| info `2.2.1` | 图标右上角徽标的内容(已废弃,请使用 badge 属性) | *number \| string* | - |
| url | 点击后跳转的链接地址 | *string* | - |
| to | 点击后跳转的目标路由对象,同 vue-router 的 [to 属性](https://router.vuejs.org/zh/api/#to) | *string \| object* | - |
| replace | 是否在跳转时替换当前页面历史 | *boolean* | `false` |
diff --git a/src/grid/demo/index.vue b/src/grid/demo/index.vue
index ce79d70ed..576df01fb 100644
--- a/src/grid/demo/index.vue
+++ b/src/grid/demo/index.vue
@@ -78,10 +78,10 @@
-
+
-
+
@@ -99,7 +99,7 @@ export default {
customContent: '自定义内容',
urlRoute: 'URL 跳转',
vueRoute: '路由跳转',
- showInfo: '提示信息',
+ showBadge: '徽标提示',
},
'en-US': {
text: 'Text',
@@ -110,7 +110,7 @@ export default {
customContent: 'Custom Content',
urlRoute: 'URL',
vueRoute: 'Vue Router',
- showInfo: 'Show Info',
+ showBadge: 'Show Badge',
},
},
};