diff --git a/src/goods-action/README.md b/src/goods-action/README.md index 2db111d60..468d05210 100644 --- a/src/goods-action/README.md +++ b/src/goods-action/README.md @@ -82,7 +82,7 @@ Use `info` prop to show badge in icon | text | Button text | *string* | - | - | | icon | Icon | *string* | - | - | | icon-class | Icon class name | *any* | `''` | - | -| info | Info message | *string \| number* | - | - | +| info | Content of badge in the upper right corner of icon | *string \| number* | - | - | | url | Link | *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/goods-action/README.zh-CN.md b/src/goods-action/README.zh-CN.md index 1d6b04cfd..138204455 100644 --- a/src/goods-action/README.zh-CN.md +++ b/src/goods-action/README.zh-CN.md @@ -84,7 +84,7 @@ export default { | text | 按钮文字 | *string* | - | - | | icon | 图标 | *string* | - | - | | icon-class | 图标额外类名 | *any* | - | - | -| info | 图标右上角提示信息 | *string \| number* | - | - | +| info | 图标右上角徽标提示的内容 | *string \| number* | - | - | | url | 点击后跳转的链接地址 | *string* | - | - | | to | 点击后跳转的目标路由对象，同 vue-router 的 [to 属性](https://router.vuejs.org/zh/api/#to) | *string \| object* | - | - | | replace | 跳转时是否替换当前页面历史 | *boolean* | `false` | - | diff --git a/src/grid-item/index.js b/src/grid-item/index.js index 17efc24ed..250488908 100644 --- a/src/grid-item/index.js +++ b/src/grid-item/index.js @@ -11,8 +11,9 @@ export default createComponent({ props: { ...routeProps, + text: String, icon: String, - text: String + info: [Number, String] }, computed: { @@ -67,7 +68,7 @@ export default createComponent({ } return [ - this.slots('icon') || (this.icon && ), + this.slots('icon') || (this.icon && ), this.slots('text') || (this.text && {this.text}) ]; } diff --git a/src/grid/README.md b/src/grid/README.md index 832d5d78b..abebaffff 100644 --- a/src/grid/README.md +++ b/src/grid/README.md @@ -15,12 +15,10 @@ Vue.use(Grid).use(GridItem); ```html - + + + + ``` @@ -83,16 +81,17 @@ Vue.use(Grid).use(GridItem); ```html - - + + + +``` + +### Show Info + +```html + + + ``` @@ -115,6 +114,7 @@ Vue.use(Grid).use(GridItem); |------|------|------|------|------| | text | Text | *string* | - | - | | icon | Icon name or URL | *string* | - | - | +| info | Content of badge in the upper right corner of icon | *string \| number* | `''` | 2.2.1 | | 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 d93a85a84..58066d64a 100644 --- a/src/grid/README.zh-CN.md +++ b/src/grid/README.zh-CN.md @@ -21,12 +21,10 @@ Vue.use(Grid).use(GridItem); ```html - + + + + ``` @@ -99,16 +97,19 @@ Vue.use(Grid).use(GridItem); ```html - - + + + +``` + +### 显示徽标 + +设置`info`属性后，会在图标的右上角显示红色的徽标 + +```html + + + ``` @@ -131,6 +132,7 @@ Vue.use(Grid).use(GridItem); |------|------|------|------|------| | text | 文字 | *string* | - | - | | icon | 图标名称或图片链接，可选值见 [Icon 组件](/#/zh-CN/icon) | *string* | - | - | +| info | 图标右上角徽标提示的内容 | *string \| number* | - | 2.2.1 | | 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 e5e1cffe0..80c71c4e2 100644 --- a/src/grid/demo/index.vue +++ b/src/grid/demo/index.vue @@ -2,89 +2,53 @@ - + - + - + - + - + - + - + - + - - - + + + + + + + + + + @@ -101,7 +65,8 @@ export default { columnNum: '自定义列数', customContent: '自定义内容', urlRoute: 'URL 跳转', - vueRoute: '路由跳转' + vueRoute: '路由跳转', + showInfo: '显示徽标' }, 'en-US': { text: 'Text', @@ -111,7 +76,8 @@ export default { columnNum: 'Column Num', customContent: 'Custom Content', urlRoute: 'URL', - vueRoute: 'Vue Router' + vueRoute: 'Vue Router', + showInfo: 'Show Info' } } }; @@ -119,5 +85,4 @@ export default { diff --git a/src/grid/test/__snapshots__/demo.spec.js.snap b/src/grid/test/__snapshots__/demo.spec.js.snap index 524b85630..2b2446cbd 100644 --- a/src/grid/test/__snapshots__/demo.spec.js.snap +++ b/src/grid/test/__snapshots__/demo.spec.js.snap @@ -162,5 +162,19 @@ exports[`renders demo correctly 1`] = ` +
+
+
+
+
5
+ 文字
+
+
+
+
99+
+ 文字
+
+
+
`; diff --git a/src/icon/README.md b/src/icon/README.md index bada899e2..4b693887a 100644 --- a/src/icon/README.md +++ b/src/icon/README.md @@ -63,7 +63,7 @@ import 'vant/lib/icon/local.css'; | Attribute | Description | Type | Default | Version | |------|------|------|------|------| | name | Icon name or URL | *string* | `''` | - | -| info | Info message | *string \| number* | `''` | - | +| info | Content of badge in the upper right corner of icon | *string \| number* | `''` | - | | color | Icon color | *string* | `inherit` | - | | size | Icon size | *string \| number* | `inherit` | - | | class-prefix | ClassName prefix | *string* | `van-icon` | - | diff --git a/src/icon/README.zh-CN.md b/src/icon/README.zh-CN.md index 5e80ee3cf..39618ef83 100644 --- a/src/icon/README.zh-CN.md +++ b/src/icon/README.zh-CN.md @@ -73,7 +73,7 @@ import 'vant/lib/icon/local.css'; | 参数 | 说明 | 类型 | 默认值 | 版本 | |------|------|------|------|------| | name | 图标名称或图片链接 | *string* | - | - | -| info | 图标右上角文字提示 | *string \| number* | - | - | +| info | 图标右上角徽标提示的内容 | *string \| number* | - | - | | color | 图标颜色 | *string* | `inherit` | - | | size | 图标大小，如 `20px` `2em`，默认单位为`px` | *string \| number* | `inherit` | - | | class-prefix | 类名前缀 | *string* | `van-icon` | - | diff --git a/src/tabbar/README.md b/src/tabbar/README.md index 0375bfcfb..7708c881e 100644 --- a/src/tabbar/README.md +++ b/src/tabbar/README.md @@ -163,7 +163,7 @@ export default { | name | Identifier | *string \| number* | Item index | - | | icon | Icon name | *string* | - | - | | dot | Whether to show red dot | *boolean* | - | - | -| info | Info message | *string \| number* | - | - | +| info | Content of badge in the upper right corner of icon | *string \| number* | - | - | | url | Link | *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/tabbar/README.zh-CN.md b/src/tabbar/README.zh-CN.md index f5c6d8437..efc322e26 100644 --- a/src/tabbar/README.zh-CN.md +++ b/src/tabbar/README.zh-CN.md @@ -169,7 +169,7 @@ export default { | name | 标签名称，作为匹配的标识符 | *string \| number* | 当前标签的索引值 | - | | icon | 图标名称或图片链接，可选值见 [Icon 组件](/#/zh-CN/icon)| *string* | - | - | | dot | 是否显示小红点 | *boolean* | - | - | -| info | 图标右上角提示信息 | *string \| number* | - | - | +| info | 图标右上角徽标提示的内容 | *string \| number* | - | - | | url | 点击后跳转的链接地址 | *string* | - | - | | to | 点击后跳转的目标路由对象，同 vue-router 的 [to 属性](https://router.vuejs.org/zh/api/#to) | *string \| object* | - | - | | replace | 跳转时是否替换当前页面历史 | *boolean* | `false` | - |