[Improvement] Tab: line resize (#1304)

packages/tabs/index.vue

@@ -72,7 +72,12 @@ export default create({
       tabs: [],
       position: 'content-top',
       curActive: 0,
-      lineStyle: {}
+      lineStyle: {},
+      events: {
+        resize: false,
+        sticky: false,
+        swipeable: false
+      }
     };
   },
 
@@ -105,8 +110,12 @@ export default create({
       }
     },
 
-    sticky(isSticky) {
-      this.scrollHandler(isSticky);
+    sticky() {
+      this.handlers(true);
+    },
+
+    swipeable() {
+      this.handlers(true);
     }
   },
 
@@ -115,45 +124,57 @@ export default create({
     this.setLine();
 
     this.$nextTick(() => {
-      if (this.sticky) {
-        this.scrollHandler(true);
-      }
-      if (this.swipeable) {
-        this.swipeableHandler(true);
-      }
+      this.handlers(true);
       this.scrollIntoView();
     });
   },
 
+  activated() {
+    this.$nextTick(() => {
+      this.handlers(true);
+    });
+  },
+
+  deactivated() {
+    this.handlers(false);
+  },
+
   beforeDestroy() {
-    /* istanbul ignore next */
-    if (this.sticky) {
-      this.scrollHandler(false);
-    }
-    /* istanbul ignore next */
-    if (this.swipeable) {
-      this.swipeableHandler(false);
-    }
+    this.handlers(false);
   },
 
   methods: {
     // whether to bind sticky listener
-    scrollHandler(init) {
-      this.scrollEl = this.scrollEl || scrollUtils.getScrollEventTarget(this.$el);
-      (init ? on : off)(this.scrollEl, 'scroll', this.onScroll, true);
-      if (init) {
+    handlers(bind) {
+      const { events } = this;
+      const sticky = this.sticky && bind;
+      const swipeable = this.swipeable && bind;
+
+      // listen to window resize event
+      if (events.resize !== bind) {
+        events.resize = bind;
+        (bind ? on : off)(window, 'resize', this.setLine, true);
+      }
+
+      // listen to scroll event
+      if (events.sticky !== sticky) {
+        events.sticky = sticky;
+        this.scrollEl = this.scrollEl || scrollUtils.getScrollEventTarget(this.$el);
+        (sticky ? on : off)(this.scrollEl, 'scroll', this.onScroll, true);
         this.onScroll();
       }
-    },
 
-    // whether to bind content swipe listener
-    swipeableHandler(init) {
-      const { content } = this.$refs;
-      const action = init ? on : off;
-      action(content, 'touchstart', this.touchStart);
-      action(content, 'touchmove', this.touchMove);
-      action(content, 'touchend', this.onTouchEnd);
-      action(content, 'touchcancel', this.onTouchEnd);
+      // listen to touch event
+      if (events.swipeable !== swipeable) {
+        events.swipeable = swipeable;
+        const { content } = this.$refs;
+        const action = swipeable ? on : off;
+
+        action(content, 'touchstart', this.touchStart);
+        action(content, 'touchmove', this.touchMove);
+        action(content, 'touchend', this.onTouchEnd);
+        action(content, 'touchcancel', this.onTouchEnd);
+      }
     },
 
     // watch swipe touch end
@@ -189,7 +210,7 @@ export default create({
     // update nav bar style
     setLine() {
       this.$nextTick(() => {
-        if (!this.$refs.tabs) {
+        if (!this.$refs.tabs || this.type !== 'line') {
           return;
         }