fix: tabs nav button disabled class

packages/tabs/src/tab-nav.vue

@@ -35,6 +35,10 @@
     data() {
       return {
         scrollable: false,
+        scrollState: {
+          prev: 0,
+          next: false
+        },
         navOffset: 0,
         isFocus: false,
         focusable: true
@@ -121,9 +125,9 @@
 
         if (containerSize < navSize) {
           const currentOffset = this.navOffset;
-          this.scrollable = this.scrollable || {};
+          this.scrollable = true;
-          this.scrollable.prev = currentOffset;
+          this.scrollState.prev = currentOffset;
-          this.scrollable.next = currentOffset + containerSize < navSize;
+          this.scrollState.next = currentOffset + containerSize < navSize;
           if (navSize - currentOffset < containerSize) {
             this.navOffset = navSize - containerSize;
           }
@@ -203,6 +207,7 @@
         onTabRemove,
         navStyle,
         scrollable,
+        scrollState,
         scrollNext,
         scrollPrev,
         changeTab,
@@ -211,8 +216,8 @@
       } = this;
       const scrollBtn = scrollable
         ? [
-          <span class={['el-tabs__nav-prev', scrollable.prev ? '' : 'is-disabled']} on-click={scrollPrev}><i class="el-icon-arrow-left"></i></span>,
+          <span class={['el-tabs__nav-prev', scrollState.prev ? '' : 'is-disabled']} on-click={scrollPrev}><i class="el-icon-arrow-left"></i></span>,
-          <span class={['el-tabs__nav-next', scrollable.next ? '' : 'is-disabled']} on-click={scrollNext}><i class="el-icon-arrow-right"></i></span>
+          <span class={['el-tabs__nav-next', scrollState.next ? '' : 'is-disabled']} on-click={scrollNext}><i class="el-icon-arrow-right"></i></span>
         ] : null;
 
       const tabs = this._l(panes, (pane, index) => {

test/unit/specs/tabs.spec.js

@@ -499,6 +499,44 @@ describe('Tabs', () => {
       });
     }, 100);
   });
+  it('nav btn disabled', done => {
+    vm = createVue({
+      template: `
+        <el-tabs ref="tabs" style="width: 200px;">
+          <el-tab-pane label="用户管理">A</el-tab-pane>
+          <el-tab-pane label="配置管理">B</el-tab-pane>
+          <el-tab-pane label="用户管理">A</el-tab-pane>
+          <el-tab-pane label="配置管理">B</el-tab-pane>
+          <el-tab-pane label="用户管理">A</el-tab-pane>
+          <el-tab-pane label="配置管理">B</el-tab-pane>
+          <el-tab-pane label="定时任务补偿">D</el-tab-pane>
+        </el-tabs>
+      `
+    }, true);
+
+    setTimeout(_ => {
+      const btnPrev = vm.$el.querySelector('.el-tabs__nav-prev');
+      btnPrev.click();
+      vm.$nextTick(_ => {
+        const tabNav = vm.$el.querySelector('.el-tabs__nav-wrap');
+        expect(tabNav.__vue__.scrollState.prev).to.be.equal(0);
+        expect(btnPrev.classList.contains('is-disabled')).to.be.true;
+        expect(tabNav.__vue__.scrollState.next).to.be.true;
+
+        const btnNext = vm.$el.querySelector('.el-tabs__nav-next');
+        const clickNext = () => {
+          if (tabNav.__vue__.scrollState.next) {
+            btnNext.click();
+            setTimeout(_ => { clickNext(); }, 500); // wait for transition end
+          } else {
+            expect(btnNext.classList.contains('is-disabled')).to.be.true;
+            done();
+          }
+        };
+        clickNext();
+      });
+    }, 100);
+  });
   it('should work with lazy', done => {
     vm = createVue({
       template: `