update Tabs keyboard logic and support @on-click event
This commit is contained in:
parent
ce7b39c204
commit
d45e919663
2 changed files with 14 additions and 210 deletions
|
@ -47,19 +47,6 @@
|
|||
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 ],
|
||||
|
@ -240,18 +227,7 @@
|
|||
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);
|
||||
}
|
||||
});
|
||||
this.handleChange(nextIndex);
|
||||
},
|
||||
handleRemove (index) {
|
||||
const tabs = this.getTabs();
|
||||
|
@ -412,8 +388,6 @@
|
|||
|
||||
this.mutationObserver.observe(hiddenParentNode, { attributes: true, childList: true, characterData: true, attributeFilter: ['style'] });
|
||||
}
|
||||
|
||||
this.handleTabKeyboardSelect();
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.observer.removeListener(this.$refs.navWrap, this.handleResize);
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue