Tabs: update on resize, fixed (#3890) (#3938)

* Tabs: update on resize, fixed #3890

* Tabs: update on resize, fixed #3890

packages/tabs/src/tab-nav.vue

@@ -1,5 +1,6 @@
 <script>
   import TabBar from './tab-bar';
+  import { addResizeListener, removeResizeListener } from 'element-ui/src/utils/resize-event';
 
   function noop() {}
 
@@ -90,26 +91,31 @@
       },
       setOffset(value) {
         this.navStyle.transform = `translateX(-${value}px)`;
+      },
+      update() {
+        const navWidth = this.$refs.nav.offsetWidth;
+        const containerWidth = this.$refs.navScroll.offsetWidth;
+        const currentOffset = this.getCurrentScrollOffset();
+
+        if (containerWidth < navWidth) {
+          const currentOffset = this.getCurrentScrollOffset();
+          this.scrollable = this.scrollable || {};
+          this.scrollable.prev = currentOffset;
+          this.scrollable.next = currentOffset + containerWidth < navWidth;
+          if (navWidth - currentOffset < containerWidth) {
+            this.setOffset(navWidth - containerWidth);
+          }
+        } else {
+          this.scrollable = false;
+          if (currentOffset > 0) {
+            this.setOffset(0);
+          }
+        }
       }
     },
 
     updated() {
-      const navWidth = this.$refs.nav.offsetWidth;
-      const containerWidth = this.$refs.navScroll.offsetWidth;
-      const currentOffset = this.getCurrentScrollOffset();
-
-      if (containerWidth < navWidth) {
-        const currentOffset = this.getCurrentScrollOffset();
-        this.scrollable = this.scrollable || {};
-        this.scrollable.prev = currentOffset;
-        this.scrollable.next = currentOffset + containerWidth < navWidth;
-        if (navWidth - currentOffset < containerWidth) {
-          this.setOffset(navWidth - containerWidth);
-        }
-      } else if (currentOffset > 0) {
-        this.scrollable = false;
-        this.setOffset(0);
-      }
+      this.update();
     },
 
     render(h) {
@@ -170,6 +176,14 @@
           </div>
         </div>
       );
+    },
+
+    mounted() {
+      addResizeListener(this.$el, this.update);
+    },
+
+    beforeDestroy() {
+      if (this.$el && this.update) removeResizeListener(this.$el, this.update);
     }
   };
 </script>