drip-public/iview
6
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #3642 from SergioCrisostomo/tabs-keyboard

Browse source 
Correct logic for selecting by keyboard
This commit is contained in:
Aresn 2018-05-18 11:02:22 +08:00 • committed by GitHub
commit a459837191
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 44 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
examples/routers/tabs.vue
View file

@ -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);
}
}
}

40
src/components/tabs/tabs.vue
View file

@ -7,7 +7,7 @@
tabindex="0"
ref="navContainer"
@keydown="handleTabKeyNavigation"
@keydown.space.prevent="handleTabKeyboardSelect"
@keydown.space.prevent="handleTabKeyboardSelect(false)"
>
<div ref="navWrap" :class="[prefixCls + '-nav-wrap', scrollable ? prefixCls + '-nav-scrollable' : '']">
<span :class="[prefixCls + '-nav-prev', scrollable ? '' : prefixCls + '-nav-scroll-disabled']" @click="scrollPrev"><Icon type="chevron-left"></Icon></span>
@ -236,22 +236,11 @@
const nextTab = getNextTab(this.navList, this.focusedKey, direction);
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);
}
});
handleTabKeyboardSelect(init = false){
if (init) return;
const focused = this.focusedKey || 0;
const index = this.navList.findIndex(({name}) => name === focused);
this.handleChange(index);
},
handleRemove (index) {
const tabs = this.getTabs();
@ -394,6 +383,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 () {
@ -413,7 +417,7 @@
this.mutationObserver.observe(hiddenParentNode, { attributes: true, childList: true, characterData: true, attributeFilter: ['style'] });
}
this.handleTabKeyboardSelect();
this.handleTabKeyboardSelect(true);
},
beforeDestroy() {
this.observer.removeListener(this.$refs.navWrap, this.handleResize);