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

Correct logic for selecting by keyboard

Browse source
This commit is contained in:
Sergio Crisostomo 2018-05-17 16:06:59 +02:00
parent 2bf3e04753
commit 38ab744203
2 changed files with 40 additions and 16 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);
}
}
}

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

@ -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 () {