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
|
|
@ -1,180 +1,12 @@
|
|||
<!--<template>-->
|
||||
<!--<Tabs value="name1" :animated="false">-->
|
||||
<!--<Tab-pane label="test" name="test">-->
|
||||
<!--<Tabs type="card" v-bind:animated="true">-->
|
||||
<!--<Tab-pane label="标签2一">标签2一的内容</Tab-pane>-->
|
||||
<!--<Tab-pane label="标签2二">标签2二的内容</Tab-pane>-->
|
||||
<!--<Tab-pane label="标签2三">标签2三的内容</Tab-pane>-->
|
||||
<!--</Tabs>-->
|
||||
<!--</Tab-pane>-->
|
||||
<!--<Tab-pane :label="label1" name="name1">-->
|
||||
<!--<Table :columns="columns1" :data="data1"></Table>-->
|
||||
<!--</Tab-pane>-->
|
||||
<!--<Tab-pane label="标签二" name="name2">-->
|
||||
<!--<Table :columns="columns1" :data="data1"></Table>-->
|
||||
<!--</Tab-pane>-->
|
||||
<!--<Tab-pane label="标签三" name="name3">-->
|
||||
<!--<Table :columns="columns1" :data="data1"></Table>-->
|
||||
<!--</Tab-pane>-->
|
||||
<!--</Tabs>-->
|
||||
<!--</template>-->
|
||||
<!--<script>-->
|
||||
<!--export default {-->
|
||||
<!--data () {-->
|
||||
<!--return {-->
|
||||
<!--label1: (h) => {-->
|
||||
<!--return h('div', [-->
|
||||
<!--h('span', '标签一'),-->
|
||||
<!--h('Button', 'button')-->
|
||||
<!--]);-->
|
||||
<!--},-->
|
||||
<!--columns1: [-->
|
||||
<!--{-->
|
||||
<!--title: '姓名',-->
|
||||
<!--key: 'name'-->
|
||||
<!--},-->
|
||||
<!--{-->
|
||||
<!--title: '年龄',-->
|
||||
<!--key: 'age'-->
|
||||
<!--},-->
|
||||
<!--{-->
|
||||
<!--title: '地址',-->
|
||||
<!--key: 'address'-->
|
||||
<!--}-->
|
||||
<!--],-->
|
||||
<!--data1: [-->
|
||||
<!--{-->
|
||||
<!--name: '王小明',-->
|
||||
<!--age: 18,-->
|
||||
<!--address: '北京市朝阳区芍药居'-->
|
||||
<!--},-->
|
||||
<!--{-->
|
||||
<!--name: '张小刚',-->
|
||||
<!--age: 25,-->
|
||||
<!--address: '北京市海淀区西二旗'-->
|
||||
<!--},-->
|
||||
<!--{-->
|
||||
<!--name: '李小红',-->
|
||||
<!--age: 30,-->
|
||||
<!--address: '上海市浦东新区世纪大道'-->
|
||||
<!--},-->
|
||||
<!--{-->
|
||||
<!--name: '周小伟',-->
|
||||
<!--age: 26,-->
|
||||
<!--address: '深圳市南山区深南大道'-->
|
||||
<!--}-->
|
||||
<!--]-->
|
||||
<!--}-->
|
||||
<!--}-->
|
||||
<!--}-->
|
||||
<!--</script>-->
|
||||
|
||||
|
||||
<!-- <template>
|
||||
<Tabs type="card" closable @on-tab-remove="handleTabRemove">
|
||||
<TabPane label="标签一" v-if="tab0">标签一的内容</TabPane>
|
||||
<TabPane label="标签二" v-if="tab1">标签二的内容</TabPane>
|
||||
<TabPane label="标签三" v-if="tab2">标签三的内容</TabPane>
|
||||
</Tabs>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
tab0: true,
|
||||
tab1: true,
|
||||
tab2: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleTabRemove (name) {
|
||||
this['tab' + name] = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script> -->
|
||||
|
||||
<!--<template>-->
|
||||
<!--<div>-->
|
||||
<!--<Button type="ghost" @click="toFirst" size="small">to first</Button>-->
|
||||
<!--<Button type="ghost" @click="toLast" size="small">to last</Button>-->
|
||||
<!--<Tabs type="card" :animated="animated" v-model="activeTab">-->
|
||||
<!--<TabPane v-for="tab in tabs" :key="tab" :label="'标签' + tab" :name="tab+''" closable>标签{{ tab }}</TabPane>-->
|
||||
<!--<div slot="extra">-->
|
||||
<!--<Button type="ghost" @click="handleTabsAdd" size="small">增加</Button>-->
|
||||
<!--</div>-->
|
||||
<!--</Tabs>-->
|
||||
<!--</div>-->
|
||||
<!--</template>-->
|
||||
<!--<script>-->
|
||||
<!--export default {-->
|
||||
<!--data () {-->
|
||||
<!--return {-->
|
||||
<!--tabs: 2,-->
|
||||
<!--activeTab:"2",-->
|
||||
<!--animated:true-->
|
||||
<!--}-->
|
||||
<!--},-->
|
||||
<!--methods: {-->
|
||||
<!--handleTabsAdd () {-->
|
||||
<!--this.tabs ++;-->
|
||||
<!--this.activeTab = this.tabs + '';-->
|
||||
<!--},-->
|
||||
<!--toFirst () {-->
|
||||
<!--this.activeTab = '1';-->
|
||||
<!--},-->
|
||||
<!--toLast () {-->
|
||||
<!--this.activeTab = this.tabs+'';-->
|
||||
<!--}-->
|
||||
<!--}-->
|
||||
<!--}-->
|
||||
<!--</script>-->
|
||||
|
||||
<!--<template>-->
|
||||
<!--<div>-->
|
||||
<!--<Tabs type="card">-->
|
||||
<!--<TabPane v-for="tab in tabs" :key="tab" :label="'标签' + tab">标签{{ tab }}</TabPane>-->
|
||||
<!--</Tabs>-->
|
||||
<!--<Button type="ghost" @click="handleTabsAdd" size="small">增加</Button>-->
|
||||
<!--<Button type="ghost" @click="handleTabsMin" size="small">减少</Button>-->
|
||||
<!--</div>-->
|
||||
<!--</template>-->
|
||||
<!--<script>-->
|
||||
<!--export default {-->
|
||||
<!--data () {-->
|
||||
<!--return {-->
|
||||
<!--tabs: 2-->
|
||||
<!--}-->
|
||||
<!--},-->
|
||||
<!--methods: {-->
|
||||
<!--handleTabsAdd () {-->
|
||||
<!--this.tabs ++;-->
|
||||
<!--},-->
|
||||
<!--handleTabsMin () {-->
|
||||
<!--this.tabs --;-->
|
||||
<!--}-->
|
||||
<!--}-->
|
||||
<!--}-->
|
||||
<!--</script>-->
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<i-input></i-input>
|
||||
<Button type="ghost" @click="handleTabsAdd" size="small" slot="extra">增加</Button>
|
||||
|
||||
<hr style="margin: 10px 0;">
|
||||
<Tabs type="card">
|
||||
<TabPane v-for="tab in tabs" :key="tab" :label="'Tab' + tab">
|
||||
<div>
|
||||
<h3>Some text...</h3>
|
||||
<i-button>Some focusable content...{{ tab }}</i-button>
|
||||
</div>
|
||||
</TabPane>
|
||||
</Tabs>
|
||||
<Tabs type="card">
|
||||
<TabPane label="标签一">标签一的内容</TabPane>
|
||||
<TabPane label="标签二" disabled>标签二的内容</TabPane>
|
||||
<TabPane label="标签三">标签三的内容</TabPane>
|
||||
<div style="margin: 200px;height: 2000px;">
|
||||
<Tabs v-model="name" type="card" @on-click="handleClick">
|
||||
<TabPane name="a" label="标签一">标签一的内容</TabPane>
|
||||
<TabPane name="b" label="标签二">标签二的内容</TabPane>
|
||||
<TabPane name="c" label="标签三">标签三的内容</TabPane>
|
||||
<TabPane name="d" label="标签四">标签四的内容</TabPane>
|
||||
<TabPane name="e" label="标签五">标签五的内容</TabPane>
|
||||
<TabPane name="f" label="标签六">标签六的内容</TabPane>
|
||||
</Tabs>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -182,15 +14,13 @@
|
|||
export default {
|
||||
data () {
|
||||
return {
|
||||
tabs: 2
|
||||
}
|
||||
name: 'b'
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleTabsAdd () {
|
||||
this.tabs ++;
|
||||
handleClick (name) {
|
||||
console.log(name);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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
Reference in a new issue