Correct logic for selecting by keyboard

Sergio Crisostomo
1 parent 2bf3e047
Showing 2 changed files with 40 additions and 16 deletions Show diff stats
examples/routers/tabs.vue
src/components/tabs/tabs.vue
@@ -176,18 +176,39 @@
             <TabPane label="标签二" disabled>标签二的内容</TabPane>
             <TabPane label="标签三">标签三的内容</TabPane>
         </Tabs>
+        <tabs v-model="name" type="card" @on-click="handleClick">
+            <tab-pane name="a" label="标签一">
+                <div>1</div>
+            </tab-pane>
+            <tab-pane name="b" label="标签二">
+                <div>2</div>
+            </tab-pane>
+            <tab-pane name="c" label="标签三">
+                <div>3</div>
+            </tab-pane>
+            <tab-pane name="d" label="标签四">
+                <div>4</div>
+            </tab-pane>
+            <tab-pane name="e" label="标签五">
+                <div>5</div>
+            </tab-pane>
+        </tabs>
     </div>
 </template>
 <script>
     export default {
         data () {
             return {
-                tabs: 2
+                tabs: 2,
+                name: 'b',
             }
         },
         methods: {
             handleTabsAdd () {
                 this.tabs ++;
+            },
+            handleClick (name) {
+                console.log(name);
             }
         }
     }
@@ -237,21 +237,9 @@
                 this.focusedKey = nextTab.name;
             },
             handleTabKeyboardSelect(){
-                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');
-                        setTimeout(() => {
-                            focusFirst(el, el);
-                        }, transitionTime);
-                    } else {
-                        setTimeout(() => {
-                            [...el.children].forEach(child => child.style.display = 'none');
-                        }, transitionTime);
-                    }
-                });
+                const focused = this.focusedKey || 0;
+                const index = this.navList.findIndex(({name}) => name === focused);
+                this.handleChange(index);
             },
             handleRemove (index) {
                 const tabs = this.getTabs();
@@ -394,6 +382,21 @@
                 this.$nextTick(() => {
                     this.scrollToActiveTab();
                 });
+
+                // update visibility
+                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');
+                        setTimeout(() => {
+                            focusFirst(el, el);
+                        }, transitionTime);
+                    } else {
+                        setTimeout(() => {
+                            [...el.children].forEach(child => child.style.display = 'none');
+                        }, transitionTime);
+                    }
+                });
             }
         },
         mounted () {