feat(GridItem): add dot prop (#4426)

src/grid-item/index.js

@@ -11,6 +11,7 @@ export default createComponent({
 
   props: {
     ...routeProps,
+    dot: Boolean,
     text: String,
     icon: String,
     info: [Number, String]
@@ -68,7 +69,10 @@ export default createComponent({
       }
 
       return [
-        this.slots('icon') || (this.icon && <Icon name={this.icon} info={this.info} class={bem('icon')} />),
+        this.slots('icon') ||
+          (this.icon && (
+            <Icon name={this.icon} dot={this.dot} info={this.info} class={bem('icon')} />
+          )),
         this.slots('text') || (this.text && <span class={bem('text')}>{this.text}</span>)
       ];
     }

src/grid/README.md

@@ -90,7 +90,7 @@ Vue.use(Grid).use(GridItem);
 
 ```html
 <van-grid :column-num="2">
-  <van-grid-item icon="home-o" text="Text" info="5" />
+  <van-grid-item icon="home-o" text="Text" dot />
   <van-grid-item icon="search" text="Text" info="99+" />
 </van-grid>
 ```
@@ -114,6 +114,7 @@ Vue.use(Grid).use(GridItem);
 |------|------|------|------|------|
 | text | Text | *string* | - | - |
 | icon | Icon name or URL | *string* | - | - |
+| dot | Whether to show red dot | *boolean* | `false` | 2.2.1 |
 | info | Content of the badge | *string \| number* | `''` | 2.2.1 |
 | url | Link URL | *string* | - | - |
 | to | Target route of the link, same as to of vue-router | *string \| object* | - | - |

src/grid/README.zh-CN.md

@@ -102,13 +102,13 @@ Vue.use(Grid).use(GridItem);
 </van-grid>
 ```
 
-### 显示徽标
+### 提示信息
 
-设置`info`属性后，会在图标的右上角显示红色的徽标
+设置`dot`属性后，会在图标右上角展示一个小红点。设置`info`属性后，会在图标右上角展示相应的徽标
 
 ```html
 <van-grid :column-num="2">
-  <van-grid-item icon="home-o" text="文字" info="5" />
+  <van-grid-item icon="home-o" text="文字" dot />
   <van-grid-item icon="search" text="文字" info="99+" />
 </van-grid>
 ```
@@ -132,6 +132,7 @@ Vue.use(Grid).use(GridItem);
 |------|------|------|------|------|
 | text | 文字 | *string* | - | - |
 | icon | 图标名称或图片链接，可选值见 [Icon 组件](/#/zh-CN/icon) | *string* | - | - |
+| dot | 是否显示图标右上角小红点 | *boolean* | `false` | 2.2.1 |
 | info | 图标右上角徽标的内容 | *string \| number* | - | 2.2.1 |
 | url | 点击后跳转的链接地址 | *string* | - | - |
 | to | 点击后跳转的目标路由对象，同 vue-router 的 [to 属性](https://router.vuejs.org/zh/api/#to) | *string \| object* | - | - |

src/grid/demo/index.vue

@@ -47,7 +47,7 @@
 
     <demo-block :title="$t('showInfo')">
       <van-grid :column-num="2">
-        <van-grid-item icon="home-o" :text="$t('text')" info="5" />
+        <van-grid-item icon="home-o" :text="$t('text')" dot />
         <van-grid-item icon="search" :text="$t('text')" info="99+" />
       </van-grid>
     </demo-block>
@@ -66,7 +66,7 @@ export default {
       customContent: '自定义内容',
       urlRoute: 'URL 跳转',
       vueRoute: '路由跳转',
-      showInfo: '显示徽标'
+      showInfo: '提示信息'
     },
     'en-US': {
       text: 'Text',

src/grid/test/__snapshots__/demo.spec.js.snap

@@ -166,7 +166,7 @@ exports[`renders demo correctly 1`] = `
     <div class="van-grid van-hairline--top">
       <div class="van-grid-item" style="flex-basis: 50%;">
         <div class="van-grid-item__content van-grid-item__content--center van-hairline"><i class="van-icon van-icon-home-o van-grid-item__icon">
-            <div class="van-info">5</div>
+            <div class="van-info van-info--dot"></div>
           </i><span class="van-grid-item__text">文字</span></div>
       </div>
       <div class="van-grid-item" style="flex-basis: 50%;">