From db94b20c8258ebb31bac99ea1f0c918d62de1059 Mon Sep 17 00:00:00 2001 From: chenjiahan Date: Tue, 17 Mar 2020 21:01:01 +0800 Subject: [PATCH] feat(GridItem): add badge prop, mark info prop as deprecated --- src/grid-item/index.js | 8 +++++--- src/grid/README.md | 6 +++--- src/grid/README.zh-CN.md | 9 +++++---- src/grid/demo/index.vue | 8 ++++---- 4 files changed, 17 insertions(+), 14 deletions(-) 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', }, }, };