From f9b6fda65cd35fc6b9d4ed1be7f4eb0853dea618 Mon Sep 17 00:00:00 2001
From: chenjiahan <chenjiahan@youzan.com>
Date: Sun, 13 Dec 2020 14:15:36 +0800
Subject: [PATCH] docs(Tabbar): use composition api

---
 src/tabbar/README.md                          | 63 +++++++++------
 src/tabbar/README.zh-CN.md                    | 63 +++++++++------
 src/tabbar/demo/index.vue                     | 76 ++++++++++---------
 .../test/__snapshots__/demo.spec.js.snap      |  8 +-
 4 files changed, 121 insertions(+), 89 deletions(-)

diff --git a/src/tabbar/README.md b/src/tabbar/README.md
index 6ce505134..8fd2b286b 100644
--- a/src/tabbar/README.md
+++ b/src/tabbar/README.md
@@ -25,11 +25,12 @@ app.use(TabbarItem);
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
-  data() {
-    return {
-      active: 0,
-    };
+  setup() {
+    const active = ref(0);
+    return { active };
   },
 };
 ```
@@ -46,11 +47,12 @@ export default {
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
-  data() {
-    return {
-      active: 'home',
-    };
+  setup() {
+    const active = ref('home');
+    return { active };
   },
 };
 ```
@@ -84,14 +86,18 @@ Use `icon` slot to custom icon.
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
-  data() {
+  setup() {
+    const active = ref(0);
+    const icon = {
+      active: 'https://img.yzcdn.cn/vant/user-active.png',
+      inactive: 'https://img.yzcdn.cn/vant/user-inactive.png',
+    };
     return {
-      active: 0,
-      icon: {
-        active: 'https://img.yzcdn.cn/vant/user-active.png',
-        inactive: 'https://img.yzcdn.cn/vant/user-inactive.png',
-      },
+      icon,
+      active,
     };
   },
 };
@@ -112,21 +118,28 @@ export default {
 
 ```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="friends-o">Tab3</van-tabbar-item>
-  <van-tabbar-item icon="setting-o">Tab4</van-tabbar-item>
+  <van-tabbar-item icon="home-o">Tab 1</van-tabbar-item>
+  <van-tabbar-item icon="search">Tab 2</van-tabbar-item>
+  <van-tabbar-item icon="friends-o">Tab 3</van-tabbar-item>
+  <van-tabbar-item icon="setting-o">Tab 4</van-tabbar-item>
 </van-tabbar>
 ```
 
 ```js
-import { Notify } from 'vant';
+import { ref } from 'vue';
+import { Toast } from 'vant';
 
 export default {
-  methods: {
-    onChange(index) {
-      Notify({ type: 'primary', message: index });
-    },
+  setup() {
+    const active = ref(0);
+    const onChange = (index) => {
+      Toast(`Tab ${index}`);
+    };
+
+    return {
+      icon,
+      onChange,
+    };
   },
 };
 ```
@@ -137,8 +150,8 @@ export default {
 <router-view />
 
 <van-tabbar route>
-  <van-tabbar-item replace to="/home" icon="home-o"> Tab </van-tabbar-item>
-  <van-tabbar-item replace to="/search" icon="search"> Tab </van-tabbar-item>
+  <van-tabbar-item replace to="/home" icon="home-o">Tab</van-tabbar-item>
+  <van-tabbar-item replace to="/search" icon="search">Tab</van-tabbar-item>
 </van-tabbar>
 ```
 
diff --git a/src/tabbar/README.zh-CN.md b/src/tabbar/README.zh-CN.md
index bbb0dc04f..e2ee0b5fa 100644
--- a/src/tabbar/README.zh-CN.md
+++ b/src/tabbar/README.zh-CN.md
@@ -27,11 +27,12 @@ app.use(TabbarItem);
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
-  data() {
-    return {
-      active: 0,
-    };
+  setup() {
+    const active = ref(0);
+    return { active };
   },
 };
 ```
@@ -50,11 +51,12 @@ export default {
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
-  data() {
-    return {
-      active: 'home',
-    };
+  setup() {
+    const active = ref('home');
+    return { active };
   },
 };
 ```
@@ -90,14 +92,18 @@ export default {
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
-  data() {
+  setup() {
+    const active = ref(0);
+    const icon = {
+      active: 'https://img.yzcdn.cn/vant/user-active.png',
+      inactive: 'https://img.yzcdn.cn/vant/user-inactive.png',
+    };
     return {
-      active: 0,
-      icon: {
-        active: 'https://img.yzcdn.cn/vant/user-active.png',
-        inactive: 'https://img.yzcdn.cn/vant/user-inactive.png',
-      },
+      icon,
+      active,
     };
   },
 };
@@ -118,21 +124,28 @@ export default {
 
 ```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="friends-o">标签3</van-tabbar-item>
-  <van-tabbar-item icon="setting-o">标签4</van-tabbar-item>
+  <van-tabbar-item icon="home-o">标签 1</van-tabbar-item>
+  <van-tabbar-item icon="search">标签 2</van-tabbar-item>
+  <van-tabbar-item icon="friends-o">标签 3</van-tabbar-item>
+  <van-tabbar-item icon="setting-o">标签 4</van-tabbar-item>
 </van-tabbar>
 ```
 
 ```js
-import { Notify } from 'vant';
+import { ref } from 'vue';
+import { Toast } from 'vant';
 
 export default {
-  methods: {
-    onChange(index) {
-      Notify({ type: 'primary', message: index });
-    },
+  setup() {
+    const active = ref(0);
+    const onChange = (index) => {
+      Toast(`标签 ${index}`);
+    };
+
+    return {
+      icon,
+      onChange,
+    };
   },
 };
 ```
@@ -145,8 +158,8 @@ export default {
 <router-view />
 
 <van-tabbar route>
-  <van-tabbar-item replace to="/home" icon="home-o"> 标签 </van-tabbar-item>
-  <van-tabbar-item replace to="/search" icon="search"> 标签 </van-tabbar-item>
+  <van-tabbar-item replace to="/home" icon="home-o">标签</van-tabbar-item>
+  <van-tabbar-item replace to="/search" icon="search">标签</van-tabbar-item>
 </van-tabbar>
 ```
 
diff --git a/src/tabbar/demo/index.vue b/src/tabbar/demo/index.vue
index a808525b6..341b6c385 100644
--- a/src/tabbar/demo/index.vue
+++ b/src/tabbar/demo/index.vue
@@ -62,58 +62,64 @@
 
   <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-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>
 </template>
 
-<script>
-export default {
-  i18n: {
-    'zh-CN': {
-      badge: '徽标提示',
-      customIcon: '自定义图标',
-      customColor: '自定义颜色',
-      matchByName: '通过名称匹配',
-      switchEvent: '监听切换事件',
-      selectTip: '你切换到了',
-    },
-    'en-US': {
-      badge: 'Show Badge',
-      customIcon: 'Custom Icon',
-      customColor: 'Custom Color',
-      matchByName: 'Match by name',
-      switchEvent: 'Change Event',
-      selectTip: 'You select ',
-    },
-  },
+<script lang="ts">
+import { reactive, toRefs } from 'vue';
+import { useTranslate } from '@demo/use-translate';
+import Toast from '../../toast';
 
-  data() {
-    return {
+const i18n = {
+  'zh-CN': {
+    badge: '徽标提示',
+    customIcon: '自定义图标',
+    customColor: '自定义颜色',
+    matchByName: '通过名称匹配',
+    switchEvent: '监听切换事件',
+    selectTip: '你切换到了',
+  },
+  'en-US': {
+    badge: 'Show Badge',
+    customIcon: 'Custom Icon',
+    customColor: 'Custom Color',
+    matchByName: 'Match by name',
+    switchEvent: 'Change Event',
+    selectTip: 'You select ',
+  },
+};
+
+export default {
+  setup() {
+    const t = useTranslate(i18n);
+    const state = reactive({
       active: 0,
       active2: 0,
       active3: 0,
       active4: 0,
       active5: 0,
       activeName: 'home',
+    });
+
+    const onChange = (index: number) => {
+      Toast(`${t('tab')} ${index + 1}`);
+    };
+
+    return {
+      ...toRefs(state),
+      t,
       icon: {
         active: 'https://img.yzcdn.cn/vant/user-active.png',
         inactive: 'https://img.yzcdn.cn/vant/user-inactive.png',
       },
+      onChange,
     };
   },
-
-  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 5907f7f1c..0c7999dfe 100644
--- a/src/tabbar/test/__snapshots__/demo.spec.js.snap
+++ b/src/tabbar/test/__snapshots__/demo.spec.js.snap
@@ -220,7 +220,7 @@ exports[`should render demo and match snapshot 1`] = `
         </i>
       </div>
       <div class="van-tabbar-item__text">
-        Tab1
+        Tab 1
       </div>
     </div>
     <div class="van-tabbar-item">
@@ -229,7 +229,7 @@ exports[`should render demo and match snapshot 1`] = `
         </i>
       </div>
       <div class="van-tabbar-item__text">
-        Tab2
+        Tab 2
       </div>
     </div>
     <div class="van-tabbar-item">
@@ -238,7 +238,7 @@ exports[`should render demo and match snapshot 1`] = `
         </i>
       </div>
       <div class="van-tabbar-item__text">
-        Tab3
+        Tab 3
       </div>
     </div>
     <div class="van-tabbar-item">
@@ -247,7 +247,7 @@ exports[`should render demo and match snapshot 1`] = `
         </i>
       </div>
       <div class="van-tabbar-item__text">
-        Tab4
+        Tab 4
       </div>
     </div>
   </div>