feat(Grid): add info prop (#4424)

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` | - |

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` | - |

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 && <Icon name={this.icon} class={bem('icon')} />),
+        this.slots('icon') || (this.icon && <Icon name={this.icon} info={this.info} class={bem('icon')} />),
         this.slots('text') || (this.text && <span class={bem('text')}>{this.text}</span>)
       ];
     }

src/grid/README.md

@@ -15,12 +15,10 @@ Vue.use(Grid).use(GridItem);
 
 ```html
 <van-grid>
-  <van-grid-item
+  <van-grid-item icon="photo-o" text="Text" />
-    v-for="value in 4"
+  <van-grid-item icon="photo-o" text="Text" />
-    :key="value"
+  <van-grid-item icon="photo-o" text="Text" />
-    icon="photo-o"
+  <van-grid-item icon="photo-o" text="Text" />
-    text="Text"
-  />
 </van-grid>
 ```
 
@@ -83,16 +81,17 @@ Vue.use(Grid).use(GridItem);
 
 ```html
 <van-grid clickable :column-num="2">
-  <van-grid-item
+  <van-grid-item icon="home-o" text="Vue Router" to="/" />
-    icon="home-o"
+  <van-grid-item icon="search" text="URL" url="/vant/mobile.html" />
-    text="Vue Router"
+</van-grid>
-    to="/"
+```
-  />
+
-  <van-grid-item
+### Show Info
-    icon="search"
+
-    text="URL"
+```html
-    url="https://www.baidu.com"
+<van-grid :column-num="2">
-  />
+  <van-grid-item icon="home-o" text="Text" info="5" />
+  <van-grid-item icon="search" text="Text" info="99+" />
 </van-grid>
 ```
 
@@ -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` | - |

src/grid/README.zh-CN.md

@@ -21,12 +21,10 @@ Vue.use(Grid).use(GridItem);
 
 ```html
 <van-grid>
-  <van-grid-item
+  <van-grid-item icon="photo-o" text="文字" />
-    v-for="value in 4"
+  <van-grid-item icon="photo-o" text="文字" />
-    :key="value"
+  <van-grid-item icon="photo-o" text="文字" />
-    icon="photo-o"
+  <van-grid-item icon="photo-o" text="文字" />
-    text="文字"
-  />
 </van-grid>
 ```
 
@@ -99,16 +97,19 @@ Vue.use(Grid).use(GridItem);
 
 ```html
 <van-grid clickable :column-num="2">
-  <van-grid-item
+  <van-grid-item icon="home-o" text="路由跳转" to="/" />
-    icon="home-o"
+  <van-grid-item icon="search" text="URL 跳转" url="/vant/mobile.html" />
-    text="路由跳转"
+</van-grid>
-    to="/"
+```
-  />
+
-  <van-grid-item
+### 显示徽标
-    icon="search"
+
-    text="URL 跳转"
+设置`info`属性后，会在图标的右上角显示红色的徽标
-    url="https://www.baidu.com"
+
-  />
+```html
+<van-grid :column-num="2">
+  <van-grid-item icon="home-o" text="文字" info="5" />
+  <van-grid-item icon="search" text="文字" info="99+" />
 </van-grid>
 ```
 
@@ -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` | - |

src/grid/demo/index.vue

@@ -2,89 +2,53 @@
   <demo-section>
     <demo-block :title="$t('basicUsage')">
       <van-grid>
-        <van-grid-item
+        <van-grid-item v-for="i in 4" :key="i" icon="photo-o" :text="$t('text')" />
-          v-for="i in 4"
-          :key="i"
-          icon="photo-o"
-          :text="$t('text')"
-        />
       </van-grid>
     </demo-block>
 
     <demo-block :title="$t('columnNum')">
       <van-grid :column-num="3">
-        <van-grid-item
+        <van-grid-item v-for="i in 6" :key="i" icon="photo-o" :text="$t('text')" />
-          v-for="i in 6"
-          :key="i"
-          icon="photo-o"
-          :text="$t('text')"
-        />
       </van-grid>
     </demo-block>
 
     <demo-block :title="$t('customContent')">
-      <van-grid
+      <van-grid :border="false" :column-num="3">
-        :border="false"
-        :column-num="3"
-      >
         <van-grid-item>
-          <van-image
+          <van-image fit="contain" src="https://img.yzcdn.cn/vant/apple-1.jpg" />
-            fit="contain"
-            src="https://img.yzcdn.cn/vant/apple-1.jpg"
-          />
         </van-grid-item>
         <van-grid-item>
-          <van-image
+          <van-image fit="contain" src="https://img.yzcdn.cn/vant/apple-2.jpg" />
-            fit="contain"
-            src="https://img.yzcdn.cn/vant/apple-2.jpg"
-          />
         </van-grid-item>
         <van-grid-item>
-          <van-image
+          <van-image fit="contain" src="https://img.yzcdn.cn/vant/apple-3.jpg" />
-            fit="contain"
-            src="https://img.yzcdn.cn/vant/apple-3.jpg"
-          />
         </van-grid-item>
       </van-grid>
     </demo-block>
 
     <demo-block :title="$t('square')">
       <van-grid square>
-        <van-grid-item
+        <van-grid-item v-for="i in 8" :key="i" icon="photo-o" :text="$t('text')" />
-          v-for="i in 8"
-          :key="i"
-          icon="photo-o"
-          :text="$t('text')"
-        />
       </van-grid>
     </demo-block>
 
     <demo-block :title="$t('gutter')">
       <van-grid :gutter="10">
-        <van-grid-item
+        <van-grid-item v-for="i in 8" :key="i" icon="photo-o" :text="$t('text')" />
-          v-for="i in 8"
-          :key="i"
-          icon="photo-o"
-          :text="$t('text')"
-        />
       </van-grid>
     </demo-block>
 
     <demo-block :title="$t('route')">
-      <van-grid
+      <van-grid clickable :column-num="2">
-        clickable
+        <van-grid-item icon="home-o" :text="$t('vueRoute')" to="/" />
-        :column-num="2"
+        <van-grid-item icon="search" :text="$t('urlRoute')" url="/vant/mobile.html" />
-      >
+      </van-grid>
-        <van-grid-item
+    </demo-block>
-          icon="home-o"
+
-          :text="$t('vueRoute')"
+    <demo-block :title="$t('showInfo')">
-          to="/"
+      <van-grid :column-num="2">
-        />
+        <van-grid-item icon="home-o" :text="$t('text')" info="5" />
-        <van-grid-item
+        <van-grid-item icon="search" :text="$t('text')" info="99+" />
-          icon="search"
-          :text="$t('urlRoute')"
-          url="https://www.baidu.com"
-        />
       </van-grid>
     </demo-block>
   </demo-section>
@@ -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 {
 
 <style lang="less">
 @import '../../style/var';
-
 </style>

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

@@ -162,5 +162,19 @@ exports[`renders demo correctly 1`] = `
       </div>
     </div>
   </div>
+  <div>
+    <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>
+          </i><span class="van-grid-item__text">文字</span></div>
+      </div>
+      <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-search van-grid-item__icon">
+            <div class="van-info">99+</div>
+          </i><span class="van-grid-item__text">文字</span></div>
+      </div>
+    </div>
+  </div>
 </div>
 `;

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` | - |

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` | - |

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` | - |

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` | - |