From fce83323b9f84cf9e4127735259f13521de86b6e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=A2=81=E7=81=8F?= Date: Thu, 17 May 2018 17:39:25 +0800 Subject: [PATCH] Revert "update Tabs keyboard logic and support @on-click event" This reverts commit d45e919663364efb627ebd421fcc4efc62ee383d. --- examples/routers/tabs.vue | 196 ++++++++++++++++++++++++++++++++--- src/components/tabs/tabs.vue | 28 ++++- 2 files changed, 210 insertions(+), 14 deletions(-) diff --git a/examples/routers/tabs.vue b/examples/routers/tabs.vue index 0f7a972b..cb017f63 100644 --- a/examples/routers/tabs.vue +++ b/examples/routers/tabs.vue @@ -1,12 +1,180 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + @@ -14,13 +182,15 @@ export default { data () { return { - name: 'b' - }; + tabs: 2 + } }, methods: { - handleClick (name) { - console.log(name); + handleTabsAdd () { + this.tabs ++; } } - }; + } + + diff --git a/src/components/tabs/tabs.vue b/src/components/tabs/tabs.vue index c4cb959c..243fea2e 100644 --- a/src/components/tabs/tabs.vue +++ b/src/components/tabs/tabs.vue @@ -47,6 +47,19 @@ else return nextTab; }; + const focusFirst = (element, root) => { + try {element.focus();} + catch(err) {} // eslint-disable-line no-empty + + if (document.activeElement == element && element !== root) return true; + + const candidates = element.children; + for (let candidate of candidates) { + if (focusFirst(candidate, root)) return true; + } + return false; + }; + export default { name: 'Tabs', mixins: [ Emitter ], @@ -227,7 +240,18 @@ this.activeKey = this.focusedKey || 0; const nextIndex = Math.max(this.navList.findIndex(tab => tab.name === this.focusedKey), 0); - this.handleChange(nextIndex); + [...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); + } + }); }, handleRemove (index) { const tabs = this.getTabs(); @@ -388,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);