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

src/grid/demo/index.vue

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