diff --git a/examples/routers/tabs.vue b/examples/routers/tabs.vue
index 0f7a972..cb017f6 100644
--- a/examples/routers/tabs.vue
+++ b/examples/routers/tabs.vue
@@ -1,12 +1,180 @@
+<!--<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 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>
+ <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>
</Tabs>
</div>
</template>
@@ -14,13 +182,15 @@
export default {
data () {
return {
- name: 'b'
- };
+ tabs: 2
+ }
},
methods: {
- handleClick (name) {
- console.log(name);
+ handleTabsAdd () {
+ this.tabs ++;
}
}
- };
+ }
</script>
+
+
diff --git a/src/components/tabs/tabs.vue b/src/components/tabs/tabs.vue
index c4cb959..243fea2 100644
--- a/src/components/tabs/tabs.vue
+++ b/src/components/tabs/tabs.vue
@@ -47,6 +47,19 @@
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 ],
@@ -227,7 +240,18 @@
this.activeKey = this.focusedKey || 0;
const nextIndex = Math.max(this.navList.findIndex(tab => tab.name === this.focusedKey), 0);
- this.handleChange(nextIndex);
+ [...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);
+ }
+ });
},
handleRemove (index) {
const tabs = this.getTabs();
@@ -388,6 +412,8 @@
this.mutationObserver.observe(hiddenParentNode, { attributes: true, childList: true, characterData: true, attributeFilter: ['style'] });
}
+
+ this.handleTabKeyboardSelect();
},
beforeDestroy() {
this.observer.removeListener(this.$refs.navWrap, this.handleResize);
--
libgit2 0.21.4