Correct disabled forward navigation

Sergio Crisostomo
1 parent 7fa3f9ef
Showing 2 changed files with 11 additions and 3 deletions Show diff stats
examples/routers/tabs.vue
src/components/tabs/tabs.vue
@@ -171,6 +171,11 @@
                 </div>
             </TabPane>
         </Tabs>
+        <Tabs type="card">
+            <TabPane label="标签一">标签一的内容</TabPane>
+            <TabPane label="标签二" disabled>标签二的内容</TabPane>
+            <TabPane label="标签三">标签三的内容</TabPane>
+        </Tabs>
     </div>
 </template>
 <script>
@@ -43,7 +43,7 @@
         const currentIndex = list.findIndex(tab => tab.name === activeKey);
         const nextIndex = (currentIndex + direction + list.length) % list.length;
         const nextTab = list[nextIndex];
-        if (nextTab.disabled) return getNextTab(list, nextTab, direction, countDisabledAlso);
+        if (nextTab.disabled) return getNextTab(list, nextTab.name, direction, countDisabledAlso);
         else return nextTab;
     };
@@ -237,8 +237,9 @@
                 this.focusedKey = nextTab.name;
             },
             handleTabKeyboardSelect(){
-                this.activeKey = this.focusedKey;
-                const nextIndex = this.navList.findIndex(tab => tab.name === this.focusedKey);
+                this.activeKey = this.focusedKey || 0;
+                const nextIndex = Math.max(this.navList.findIndex(tab => tab.name === this.focusedKey), 0);
+
                 [...this.$refs.panes.children].forEach((el, i) => {
                     if (nextIndex === i) {
                         [...el.children].forEach(child => child.style.display = 'block');
@@ -411,6 +412,8 @@
                 this.mutationObserver.observe(hiddenParentNode, { attributes: true, childList: true, characterData: true, attributeFilter: ['style'] });
             }
+
+            this.handleTabKeyboardSelect();
         },
         beforeDestroy() {
             this.observer.removeListener(this.$refs.navWrap, this.handleResize);