From 616238b9d4895e1eeba6ee609ce5a48ccecb9c7c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BC=A0=E6=95=8F?= <cookfront@gmail.com>
Date: Mon, 6 Nov 2017 00:20:31 -0600
Subject: [PATCH] [bug fix]: tabs dynamic generate bug (#284)

---
 packages/tab/index.vue  | 13 +++++++++
 packages/tabs/index.vue | 61 +++++++++++++++++++++++++----------------
 2 files changed, 51 insertions(+), 23 deletions(-)

diff --git a/packages/tab/index.vue b/packages/tab/index.vue
index 65933ef2e..2b195283e 100644
--- a/packages/tab/index.vue
+++ b/packages/tab/index.vue
@@ -47,6 +47,19 @@ export default {
         index
       });
     }
+  },
+
+  destroyed() {
+    const key = this.key;
+    const tabs = this.parentGroup.tabs;
+
+    for (let i = 0; i < tabs.length; i++) {
+      /* istanbul ignore else */
+      if (tabs[i].index === key) {
+        this.parentGroup.tabs.splice(i, 1);
+        return;
+      }
+    }
   }
 };
 </script>
diff --git a/packages/tabs/index.vue b/packages/tabs/index.vue
index 35801c65d..4b4e7fbbf 100644
--- a/packages/tabs/index.vue
+++ b/packages/tabs/index.vue
@@ -72,9 +72,10 @@
     data() {
       return {
         tabs: [],
-        isReady: false,
         curActive: +this.active,
-        isSwiping: false
+        isSwiping: false,
+        isInitEvents: false,
+        navBarStyle: {}
       };
     },
 
@@ -84,31 +85,27 @@
       },
 
       curActive() {
+        this.setNavBarStyle();
         /* istanbul ignore else */
         if (this.tabs.length > this.swipeThreshold) {
           this.doOnValueChange();
         }
+      },
+      
+      tabs(val) {
+        this.$nextTick(() => {
+          this.setNavBarStyle();
+          if (val.length > this.swipeThreshold) {
+            this.initEvents();
+            this.doOnValueChange();
+          } else {
+            this.isInitEvents = false;
+          }
+        });
       }
     },
 
     computed: {
-      /**
-       * `type`为`line`时，tab下方的横线的样式
-       */
-      navBarStyle() {
-        if (!this.isReady || this.type !== 'line' || !this.$refs.tabkey) return;
-
-        const tabKey = this.curActive;
-        const elem = this.$refs.tabkey[tabKey];
-        const offsetWidth = `${elem.offsetWidth || 0}px`;
-        const offsetLeft = `${elem.offsetLeft || 0}px`;
-
-        return {
-          width: offsetWidth,
-          transform: `translate3d(${offsetLeft}, 0, 0)`,
-          transitionDuration: `${this.duration}s`
-        };
-      },
       swipeWidth() {
         return this.$refs.swipe && this.$refs.swipe.getBoundingClientRect().width;
       },
@@ -127,17 +124,34 @@
     mounted() {
       // 页面载入完成
       this.$nextTick(() => {
-        // 可以开始触发在computed中关于nav-bar的css动画
-        this.isReady = true;
-        this.initEvents();
+        this.setNavBarStyle();
   
         if (this.tabs.length > this.swipeThreshold) {
+          this.initEvents();
           this.doOnValueChange();
         }
       });
     },
 
     methods: {
+      /**
+       * `type`为`line`时，tab下方的横线的样式
+       */
+      setNavBarStyle() {
+        if (this.type !== 'line' || !this.$refs.tabkey) return {};
+
+        const tabKey = this.curActive;
+        const elem = this.$refs.tabkey[tabKey];
+        const offsetWidth = `${elem.offsetWidth || 0}px`;
+        const offsetLeft = `${elem.offsetLeft || 0}px`;
+
+        this.navBarStyle = {
+          width: offsetWidth,
+          transform: `translate3d(${offsetLeft}, 0, 0)`,
+          transitionDuration: `${this.duration}s`
+        };
+      },
+
       handleTabClick(index) {
         if (this.tabs[index].disabled) {
           this.$emit('disabled', index);
@@ -169,8 +183,9 @@
 
       initEvents() {
         const el = this.$refs.swipe;
-        if (!el) return;
+        if (!el || this.isInitEvents) return;
 
+        this.isInitEvents = true;
         let swipeState = {};
 
         swipe(el, {