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,10 +91,8 @@
       },
       setOffset(value) {
         this.navStyle.transform = `translateX(-${value}px)`;
-      }
       },
-
-    updated() {
+      update() {
         const navWidth = this.$refs.nav.offsetWidth;
         const containerWidth = this.$refs.navScroll.offsetWidth;
         const currentOffset = this.getCurrentScrollOffset();
@@ -106,10 +105,17 @@
           if (navWidth - currentOffset < containerWidth) {
             this.setOffset(navWidth - containerWidth);
           }
-      } else if (currentOffset > 0) {
+        } else {
           this.scrollable = false;
+          if (currentOffset > 0) {
             this.setOffset(0);
           }
+        }
+      }
+    },
+
+    updated() {
+      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>