[Doc] Tabbar: update demo

packages/tabbar/demo/index.vue

@@ -2,6 +2,15 @@
   <demo-section>
     <demo-block :title="$t('basicUsage')">
       <van-tabbar v-model="active">
+        <van-tabbar-item icon="home-o">{{ $t('tab') }}</van-tabbar-item>
+        <van-tabbar-item icon="search">{{ $t('tab') }}</van-tabbar-item>
+        <van-tabbar-item icon="friends-o">{{ $t('tab') }}</van-tabbar-item>
+        <van-tabbar-item icon="setting-o">{{ $t('tab') }}</van-tabbar-item>
+      </van-tabbar>
+    </demo-block>
+
+    <demo-block :title="$t('badge')">
+      <van-tabbar v-model="active2">
         <van-tabbar-item icon="home-o">{{ $t('tab') }}</van-tabbar-item>
         <van-tabbar-item
           icon="search"
@@ -25,7 +34,7 @@
     </demo-block>
 
     <demo-block :title="$t('customIcon')">
-      <van-tabbar v-model="active2">
+      <van-tabbar v-model="active3">
         <van-tabbar-item info="3">
           <span>{{ $t('custom') }}</span>
           <img
@@ -41,7 +50,7 @@
 
     <demo-block :title="$t('customColor')">
       <van-tabbar
-        v-model="active3"
+        v-model="active4"
         active-color="#07c160"
         inactive-color="#000"
       >
@@ -58,11 +67,13 @@
 export default {
   i18n: {
     'zh-CN': {
+      badge: '显示徽标',
       customIcon: '自定义图标',
       customColor: '自定义颜色'
     },
     'en-US': {
-      customIcon: 'Custom icon',
+      badge: 'Show Badge',
+      customIcon: 'Custom Icon',
       customColor: 'Custom Color'
     }
   },
@@ -72,6 +83,7 @@ export default {
       active: 0,
       active2: 0,
       active3: 0,
+      active4: 0,
       icon: {
         normal: 'https://img.yzcdn.cn/public_files/2017/10/13/c547715be149dd3faa817e4a948b40c4.png',
         active: 'https://img.yzcdn.cn/public_files/2017/10/13/793c77793db8641c4c325b7f25bf130d.png'