docs(Tabbar): use composition api

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() {
-    return {
-      active: 0,
-      icon: {
+  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 {
+      icon,
+      active,
     };
   },
 };
@@ -120,13 +126,20 @@ export default {
 ```
 
 ```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,
+    };
   },
 };
 ```

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() {
-    return {
-      active: 0,
-      icon: {
+  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 {
+      icon,
+      active,
     };
   },
 };
@@ -126,13 +132,20 @@ export default {
 ```
 
 ```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,
+    };
   },
 };
 ```

src/tabbar/demo/index.vue

@@ -62,17 +62,20 @@
 
   <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: {
+<script lang="ts">
+import { reactive, toRefs } from 'vue';
+import { useTranslate } from '@demo/use-translate';
+import Toast from '../../toast';
+
+const i18n = {
   'zh-CN': {
     badge: '徽标提示',
     customIcon: '自定义图标',
@@ -89,31 +92,34 @@ export default {
     switchEvent: 'Change Event',
     selectTip: 'You select ',
   },
-  },
+};
 
-  data() {
-    return {
+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>