From 36086ff9384635d498543f85d556d62139315d20 Mon Sep 17 00:00:00 2001
From: Dottieworks <daejonglin@gmail.com>
Date: Thu, 5 Dec 2019 11:12:03 +0800
Subject: [PATCH] docs(Tabbar): add change event demo (#5173)

---
 src/tabbar/README.md                          | 25 +++++++++++++++
 src/tabbar/README.zh-CN.md                    | 24 ++++++++++++++
 src/tabbar/demo/index.vue                     | 27 ++++++++++++++--
 .../test/__snapshots__/demo.spec.js.snap      | 32 +++++++++++++++++++
 4 files changed, 106 insertions(+), 2 deletions(-)

diff --git a/src/tabbar/README.md b/src/tabbar/README.md
index 51cc9faf0..681150a0e 100644
--- a/src/tabbar/README.md
+++ b/src/tabbar/README.md
@@ -112,6 +112,31 @@ export default {
 </van-tabbar>
 ```
 
+
+### Change Event
+
+```html
+<van-tabbar 
+  v-model="active" 
+  @change="onChange"
+>
+  <van-tabbar-item icon="home-o">Tab1</van-tabbar-item>
+  <van-tabbar-item icon="search">Tab2</van-tabbar-item>
+  <van-tabbar-item icon="freinds-o">Tab3</van-tabbar-item>
+  <van-tabbar-item icon="setting-o">Tab4</van-tabbar-item>
+</van-tabbar>
+```
+
+```js
+export default {
+  methods: {
+    onChange(index) {
+      Notify({ type: 'primary', message: index });
+    }
+  }
+}
+```
+
 ### Route Mode
 
 ```html
diff --git a/src/tabbar/README.zh-CN.md b/src/tabbar/README.zh-CN.md
index e2552ef9d..6df4dd309 100644
--- a/src/tabbar/README.zh-CN.md
+++ b/src/tabbar/README.zh-CN.md
@@ -118,6 +118,30 @@ export default {
 </van-tabbar>
 ```
 
+### Change 事件
+
+```html
+<van-tabbar 
+  v-model="active" 
+  @change="onChange"
+>
+  <van-tabbar-item icon="home-o">标签1</van-tabbar-item>
+  <van-tabbar-item icon="search">标签2</van-tabbar-item>
+  <van-tabbar-item icon="freinds-o">标签3</van-tabbar-item>
+  <van-tabbar-item icon="setting-o">标签4</van-tabbar-item>
+</van-tabbar>
+```
+
+```js
+export default {
+  methods: {
+    onChange(index) {
+      Notify({ type: 'primary', message: index });
+    }
+  }
+}
+```
+
 ### 路由模式
 
 标签栏支持路由模式，用于搭配`vue-router`使用。路由模式下会匹配页面路径和标签的`to`属性，并自动选中对应的标签
diff --git a/src/tabbar/demo/index.vue b/src/tabbar/demo/index.vue
index c30966a86..96a25d7ff 100644
--- a/src/tabbar/demo/index.vue
+++ b/src/tabbar/demo/index.vue
@@ -48,6 +48,15 @@
         <van-tabbar-item icon="setting-o">{{ $t('tab') }}</van-tabbar-item>
       </van-tabbar>
     </demo-block>
+
+    <demo-block :title="$t('switchEvent')">
+      <van-tabbar v-model="active5" @change="onChange">
+        <van-tabbar-item icon="home-o">{{ $t('tab') + 1 }}</van-tabbar-item>
+        <van-tabbar-item icon="search">{{ $t('tab') + 2 }}</van-tabbar-item>
+        <van-tabbar-item icon="friends-o">{{ $t('tab') + 3 }}</van-tabbar-item>
+        <van-tabbar-item icon="setting-o">{{ $t('tab') + 4 }}</van-tabbar-item>
+      </van-tabbar>
+    </demo-block>
   </demo-section>
 </template>
 
@@ -58,13 +67,17 @@ export default {
       badge: '提示信息',
       customIcon: '自定义图标',
       customColor: '自定义颜色',
-      matchByName: '通过名称匹配'
+      matchByName: '通过名称匹配',
+      switchEvent: '切换标签事件',
+      selectTip: '你切换到了'
     },
     'en-US': {
       badge: 'Show Badge',
       customIcon: 'Custom Icon',
       customColor: 'Custom Color',
-      matchByName: 'Match by name'
+      matchByName: 'Match by name',
+      switchEvent: 'Change Event',
+      selectTip: 'You select '
     }
   },
 
@@ -74,12 +87,22 @@ export default {
       active2: 0,
       active3: 0,
       active4: 0,
+      active5: 0,
       activeName: 'home',
       icon: {
         active: 'https://img.yzcdn.cn/vant/user-active.png',
         inactive: 'https://img.yzcdn.cn/vant/user-inactive.png'
       }
     };
+  },
+
+  methods: {
+    onChange(index) {
+      this.$notify({
+        type: 'primary',
+        message: `${this.$t('selectTip')} ${this.$t('tab')}${index + 1}`
+      });
+    }
   }
 };
 </script>
diff --git a/src/tabbar/test/__snapshots__/demo.spec.js.snap b/src/tabbar/test/__snapshots__/demo.spec.js.snap
index 08cf7c656..5412410e6 100644
--- a/src/tabbar/test/__snapshots__/demo.spec.js.snap
+++ b/src/tabbar/test/__snapshots__/demo.spec.js.snap
@@ -154,5 +154,37 @@ exports[`renders demo correctly 1`] = `
       </div>
     </div>
   </div>
+  <div>
+    <div class="van-hairline--top-bottom van-tabbar van-tabbar--fixed" style="z-index: 1;">
+      <div class="van-tabbar-item van-tabbar-item--active">
+        <div class="van-tabbar-item__icon"><i class="van-icon van-icon-home-o">
+            <!----></i>
+          <!---->
+        </div>
+        <div class="van-tabbar-item__text">标签1</div>
+      </div>
+      <div class="van-tabbar-item">
+        <div class="van-tabbar-item__icon"><i class="van-icon van-icon-search">
+            <!----></i>
+          <!---->
+        </div>
+        <div class="van-tabbar-item__text">标签2</div>
+      </div>
+      <div class="van-tabbar-item">
+        <div class="van-tabbar-item__icon"><i class="van-icon van-icon-friends-o">
+            <!----></i>
+          <!---->
+        </div>
+        <div class="van-tabbar-item__text">标签3</div>
+      </div>
+      <div class="van-tabbar-item">
+        <div class="van-tabbar-item__icon"><i class="van-icon van-icon-setting-o">
+            <!----></i>
+          <!---->
+        </div>
+        <div class="van-tabbar-item__text">标签4</div>
+      </div>
+    </div>
+  </div>
 </div>
 `;