feat(GridItem): add badge prop, mark info prop as deprecated

youzan · Mar 17, 2020 · db94b20 · db94b20
1 parent 0dea9e2
commit db94b20
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 14 deletions.
diff --git 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 (
           <div class={bem('icon-wrapper')}>
             {iconSlot}
-            <Info dot={this.dot} info={this.info} />
+            <Info dot={this.dot} info={info} />
           </div>
         );
       }
@@ -85,7 +87,7 @@ export default createComponent({
           <Icon
             name={this.icon}
             dot={this.dot}
-            info={this.info}
+            info={info}
             size={this.parent.iconSize}
             class={bem('icon')}
             classPrefix={this.iconPrefix}

diff --git a/src/grid/README.md b/src/grid/README.md
@@ -87,12 +87,12 @@ Vue.use(GridItem);
 </van-grid>
 ```
 
-### Show Info
+### Show Badge
 
 ```html
 <van-grid :column-num="2">
   <van-grid-item icon="home-o" text="Text" dot />
-  <van-grid-item icon="search" text="Text" info="99+" />
+  <van-grid-item icon="search" text="Text" badge="99+" />
 </van-grid>
 ```
 
@@ -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
@@ -103,14 +103,14 @@ Vue.use(GridItem);
 </van-grid>
 ```
 
-### 提示信息
+### 徽标提示
 
-设置`dot`属性后，会在图标右上角展示一个小红点。设置`info`属性后，会在图标右上角展示相应的徽标
+设置`dot`属性后，会在图标右上角展示一个小红点。设置`badge`属性后，会在图标右上角展示相应的徽标
 
 ```html
 <van-grid :column-num="2">
   <van-grid-item icon="home-o" text="文字" dot />
-  <van-grid-item icon="search" text="文字" info="99+" />
+  <van-grid-item icon="search" text="文字" badge="99+" />
 </van-grid>
 ```
 
@@ -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
@@ -78,10 +78,10 @@
       </van-grid>
     </demo-block>
 
-    <demo-block :title="$t('showInfo')">
+    <demo-block :title="$t('showBadge')">
       <van-grid :column-num="2">
         <van-grid-item icon="home-o" :text="$t('text')" dot />
-        <van-grid-item icon="search" :text="$t('text')" info="99+" />
+        <van-grid-item icon="search" :text="$t('text')" badge="99+" />
       </van-grid>
     </demo-block>
   </demo-section>
@@ -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',
     },
   },
 };