From 7fda2659f5d30420f0f2fb6188f9aa5ee120f0be Mon Sep 17 00:00:00 2001
From: chenjiahan <chenjiahan@youzan.com>
Date: Sun, 26 Jul 2020 13:12:21 +0800
Subject: [PATCH] feat: migrate Tabbar component

---
 components.js            |  2 ++
 src/tabbar-item/index.js | 12 +++++++-----
 src/tabbar/index.js      | 14 ++++++++------
 vant.config.js           | 16 ++++++++--------
 4 files changed, 25 insertions(+), 19 deletions(-)

diff --git a/components.js b/components.js
index 6c32a7231..7117b4908 100644
--- a/components.js
+++ b/components.js
@@ -37,4 +37,6 @@ module.exports = [
   'share-sheet',
   'pull-refresh',
   'field',
+  'tabbar',
+  'tabbar-item',
 ];
diff --git a/src/tabbar-item/index.js b/src/tabbar-item/index.js
index 80b273532..2698e2e74 100644
--- a/src/tabbar-item/index.js
+++ b/src/tabbar-item/index.js
@@ -24,6 +24,8 @@ export default createComponent({
     iconPrefix: String,
   },
 
+  emits: ['click'],
+
   data() {
     return {
       active: false,
@@ -51,10 +53,8 @@ export default createComponent({
     },
 
     genIcon(active) {
-      const slot = this.slots('icon', { active });
-
-      if (slot) {
-        return slot;
+      if (this.$slots.icon) {
+        return this.$slots.icon({ active });
       }
 
       if (this.icon) {
@@ -76,7 +76,9 @@ export default createComponent({
             info={isDef(this.badge) ? this.badge : this.info}
           />
         </div>
-        <div class={bem('text')}>{this.slots('default', { active })}</div>
+        <div class={bem('text')}>
+          {this.$slots.default ? this.$slots.default({ active }) : null}
+        </div>
       </div>
     );
   },
diff --git a/src/tabbar/index.js b/src/tabbar/index.js
index 27b5d445b..d0bbfefbf 100644
--- a/src/tabbar/index.js
+++ b/src/tabbar/index.js
@@ -13,7 +13,7 @@ export default createComponent({
     placeholder: Boolean,
     activeColor: String,
     inactiveColor: String,
-    value: {
+    modelValue: {
       type: [Number, String],
       default: 0,
     },
@@ -31,6 +31,8 @@ export default createComponent({
     },
   },
 
+  emits: ['change', 'update:modelValue'],
+
   data() {
     return {
       height: null,
@@ -48,8 +50,8 @@ export default createComponent({
   },
 
   watch: {
-    value: 'setActiveItem',
     children: 'setActiveItem',
+    modelValue: 'setActiveItem',
   },
 
   mounted() {
@@ -61,13 +63,13 @@ export default createComponent({
   methods: {
     setActiveItem() {
       this.children.forEach((item, index) => {
-        item.active = (item.name || index) === this.value;
+        item.active = (item.name || index) === this.modelValue;
       });
     },
 
     onChange(active) {
-      if (active !== this.value) {
-        this.$emit('input', active);
+      if (active !== this.modelValue) {
+        this.$emit('update:modelValue', active);
         this.$emit('change', active);
       }
     },
@@ -85,7 +87,7 @@ export default createComponent({
             }),
           ]}
         >
-          {this.slots()}
+          {this.$slots.default?.()}
         </div>
       );
     },
diff --git a/vant.config.js b/vant.config.js
index 54f629706..05fae893a 100644
--- a/vant.config.js
+++ b/vant.config.js
@@ -310,10 +310,10 @@ module.exports = {
               //   path: 'tab',
               //   title: 'Tab 标签页',
               // },
-              // {
-              //   path: 'tabbar',
-              //   title: 'Tabbar 标签栏',
-              // },
+              {
+                path: 'tabbar',
+                title: 'Tabbar 标签栏',
+              },
               {
                 path: 'tree-select',
                 title: 'TreeSelect 分类选择',
@@ -644,10 +644,10 @@ module.exports = {
               //   path: 'tab',
               //   title: 'Tab',
               // },
-              // {
-              //   path: 'tabbar',
-              //   title: 'Tabbar',
-              // },
+              {
+                path: 'tabbar',
+                title: 'Tabbar',
+              },
               {
                 path: 'tree-select',
                 title: 'TreeSelect',