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>
|
<template>
|
||||||
<div>
|
<div style="margin: 200px;height: 2000px;">
|
||||||
<i-input></i-input>
|
<Tabs v-model="name" type="card" @on-click="handleClick">
|
||||||
<Button type="ghost" @click="handleTabsAdd" size="small" slot="extra">增加</Button>
|
<TabPane name="a" label="标签一">标签一的内容</TabPane>
|
||||||
|
<TabPane name="b" label="标签二">标签二的内容</TabPane>
|
||||||
<hr style="margin: 10px 0;">
|
<TabPane name="c" label="标签三">标签三的内容</TabPane>
|
||||||
<Tabs type="card">
|
<TabPane name="d" label="标签四">标签四的内容</TabPane>
|
||||||
<TabPane v-for="tab in tabs" :key="tab" :label="'Tab' + tab">
|
<TabPane name="e" label="标签五">标签五的内容</TabPane>
|
||||||
<div>
|
<TabPane name="f" label="标签六">标签六的内容</TabPane>
|
||||||
<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>
|
|
||||||
</Tabs>
|
</Tabs>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -182,15 +14,13 @@
|
||||||
export default {
|
export default {
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
tabs: 2
|
name: 'b'
|
||||||
}
|
};
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
handleTabsAdd () {
|
handleClick (name) {
|
||||||
this.tabs ++;
|
console.log(name);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -47,19 +47,6 @@
|
||||||
else return nextTab;
|
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 {
|
export default {
|
||||||
name: 'Tabs',
|
name: 'Tabs',
|
||||||
mixins: [ Emitter ],
|
mixins: [ Emitter ],
|
||||||
|
|
@ -240,18 +227,7 @@
|
||||||
this.activeKey = this.focusedKey || 0;
|
this.activeKey = this.focusedKey || 0;
|
||||||
const nextIndex = Math.max(this.navList.findIndex(tab => tab.name === this.focusedKey), 0);
|
const nextIndex = Math.max(this.navList.findIndex(tab => tab.name === this.focusedKey), 0);
|
||||||
|
|
||||||
[...this.$refs.panes.children].forEach((el, i) => {
|
this.handleChange(nextIndex);
|
||||||
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) {
|
handleRemove (index) {
|
||||||
const tabs = this.getTabs();
|
const tabs = this.getTabs();
|
||||||
|
|
@ -412,8 +388,6 @@
|
||||||
|
|
||||||
this.mutationObserver.observe(hiddenParentNode, { attributes: true, childList: true, characterData: true, attributeFilter: ['style'] });
|
this.mutationObserver.observe(hiddenParentNode, { attributes: true, childList: true, characterData: true, attributeFilter: ['style'] });
|
||||||
}
|
}
|
||||||
|
|
||||||
this.handleTabKeyboardSelect();
|
|
||||||
},
|
},
|
||||||
beforeDestroy() {
|
beforeDestroy() {
|
||||||
this.observer.removeListener(this.$refs.navWrap, this.handleResize);
|
this.observer.removeListener(this.$refs.navWrap, this.handleResize);
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue