chenhaodong / mew-iview

Commit fce83323b9f84cf9e4127735259f13521de86b6e

Authored by 梁灏
1 parent d45e9196

Revert "update Tabs keyboard logic and support @on-click event" 

This reverts commit d45e919663364efb627ebd421fcc4efc62ee383d.
Showing 2 changed files with 210 additions and 14 deletions   Show diff stats
Inline Side-by-side
examples/routers/tabs.vue
  Show/Hide comments   View file @fce8332
  1 +<!--<template>-->
  2 + <!--<Tabs value="name1" :animated="false">-->
  3 + <!--<Tab-pane label="test" name="test">-->
  4 + <!--<Tabs type="card" v-bind:animated="true">-->
  5 + <!--<Tab-pane label="标签2一">标签2一的内容</Tab-pane>-->
  6 + <!--<Tab-pane label="标签2二">标签2二的内容</Tab-pane>-->
  7 + <!--<Tab-pane label="标签2三">标签2三的内容</Tab-pane>-->
  8 + <!--</Tabs>-->
  9 + <!--</Tab-pane>-->
  10 + <!--<Tab-pane :label="label1" name="name1">-->
  11 + <!--<Table :columns="columns1" :data="data1"></Table>-->
  12 + <!--</Tab-pane>-->
  13 + <!--<Tab-pane label="标签二" name="name2">-->
  14 + <!--<Table :columns="columns1" :data="data1"></Table>-->
  15 + <!--</Tab-pane>-->
  16 + <!--<Tab-pane label="标签三" name="name3">-->
  17 + <!--<Table :columns="columns1" :data="data1"></Table>-->
  18 + <!--</Tab-pane>-->
  19 + <!--</Tabs>-->
  20 +<!--</template>-->
  21 +<!--<script>-->
  22 + <!--export default {-->
  23 + <!--data () {-->
  24 + <!--return {-->
  25 + <!--label1: (h) => {-->
  26 + <!--return h('div', [-->
  27 + <!--h('span', '标签一'),-->
  28 + <!--h('Button', 'button')-->
  29 + <!--]);-->
  30 + <!--},-->
  31 + <!--columns1: [-->
  32 + <!--{-->
  33 + <!--title: '姓名',-->
  34 + <!--key: 'name'-->
  35 + <!--},-->
  36 + <!--{-->
  37 + <!--title: '年龄',-->
  38 + <!--key: 'age'-->
  39 + <!--},-->
  40 + <!--{-->
  41 + <!--title: '地址',-->
  42 + <!--key: 'address'-->
  43 + <!--}-->
  44 + <!--],-->
  45 + <!--data1: [-->
  46 + <!--{-->
  47 + <!--name: '王小明',-->
  48 + <!--age: 18,-->
  49 + <!--address: '北京市朝阳区芍药居'-->
  50 + <!--},-->
  51 + <!--{-->
  52 + <!--name: '张小刚',-->
  53 + <!--age: 25,-->
  54 + <!--address: '北京市海淀区西二旗'-->
  55 + <!--},-->
  56 + <!--{-->
  57 + <!--name: '李小红',-->
  58 + <!--age: 30,-->
  59 + <!--address: '上海市浦东新区世纪大道'-->
  60 + <!--},-->
  61 + <!--{-->
  62 + <!--name: '周小伟',-->
  63 + <!--age: 26,-->
  64 + <!--address: '深圳市南山区深南大道'-->
  65 + <!--}-->
  66 + <!--]-->
  67 + <!--}-->
  68 + <!--}-->
  69 + <!--}-->
  70 +<!--</script>-->
  71 +
  72 +
  73 +<!-- <template>
  74 + <Tabs type="card" closable @on-tab-remove="handleTabRemove">
  75 + <TabPane label="标签一" v-if="tab0">标签一的内容</TabPane>
  76 + <TabPane label="标签二" v-if="tab1">标签二的内容</TabPane>
  77 + <TabPane label="标签三" v-if="tab2">标签三的内容</TabPane>
  78 + </Tabs>
  79 +</template>
  80 +<script>
  81 + export default {
  82 + data () {
  83 + return {
  84 + tab0: true,
  85 + tab1: true,
  86 + tab2: true
  87 + }
  88 + },
  89 + methods: {
  90 + handleTabRemove (name) {
  91 + this['tab' + name] = false;
  92 + }
  93 + }
  94 + }
  95 +</script> -->
  96 +
  97 +<!--<template>-->
  98 + <!--<div>-->
  99 + <!--<Button type="ghost" @click="toFirst" size="small">to first</Button>-->
  100 + <!--<Button type="ghost" @click="toLast" size="small">to last</Button>-->
  101 + <!--<Tabs type="card" :animated="animated" v-model="activeTab">-->
  102 + <!--<TabPane v-for="tab in tabs" :key="tab" :label="'标签' + tab" :name="tab+''" closable>标签{{ tab }}</TabPane>-->
  103 + <!--<div slot="extra">-->
  104 + <!--<Button type="ghost" @click="handleTabsAdd" size="small">增加</Button>-->
  105 + <!--</div>-->
  106 + <!--</Tabs>-->
  107 + <!--</div>-->
  108 +<!--</template>-->
  109 +<!--<script>-->
  110 + <!--export default {-->
  111 + <!--data () {-->
  112 + <!--return {-->
  113 + <!--tabs: 2,-->
  114 + <!--activeTab:"2",-->
  115 + <!--animated:true-->
  116 + <!--}-->
  117 + <!--},-->
  118 + <!--methods: {-->
  119 + <!--handleTabsAdd () {-->
  120 + <!--this.tabs ++;-->
  121 + <!--this.activeTab = this.tabs + '';-->
  122 + <!--},-->
  123 + <!--toFirst () {-->
  124 + <!--this.activeTab = '1';-->
  125 + <!--},-->
  126 + <!--toLast () {-->
  127 + <!--this.activeTab = this.tabs+'';-->
  128 + <!--}-->
  129 + <!--}-->
  130 + <!--}-->
  131 +<!--</script>-->
  132 +
  133 +<!--<template>-->
  134 + <!--<div>-->
  135 + <!--<Tabs type="card">-->
  136 + <!--<TabPane v-for="tab in tabs" :key="tab" :label="'标签' + tab">标签{{ tab }}</TabPane>-->
  137 + <!--</Tabs>-->
  138 + <!--<Button type="ghost" @click="handleTabsAdd" size="small">增加</Button>-->
  139 + <!--<Button type="ghost" @click="handleTabsMin" size="small">减少</Button>-->
  140 + <!--</div>-->
  141 +<!--</template>-->
  142 +<!--<script>-->
  143 + <!--export default {-->
  144 + <!--data () {-->
  145 + <!--return {-->
  146 + <!--tabs: 2-->
  147 + <!--}-->
  148 + <!--},-->
  149 + <!--methods: {-->
  150 + <!--handleTabsAdd () {-->
  151 + <!--this.tabs ++;-->
  152 + <!--},-->
  153 + <!--handleTabsMin () {-->
  154 + <!--this.tabs &#45;&#45;;-->
  155 + <!--}-->
  156 + <!--}-->
  157 + <!--}-->
  158 +<!--</script>-->
  159 +
1 160 <template>
2   - <div style="margin: 200px;height: 2000px;">
3   - <Tabs v-model="name" type="card" @on-click="handleClick">
4   - <TabPane name="a" label="标签一">标签一的内容</TabPane>
5   - <TabPane name="b" label="标签二">标签二的内容</TabPane>
6   - <TabPane name="c" label="标签三">标签三的内容</TabPane>
7   - <TabPane name="d" label="标签四">标签四的内容</TabPane>
8   - <TabPane name="e" label="标签五">标签五的内容</TabPane>
9   - <TabPane name="f" label="标签六">标签六的内容</TabPane>
  161 + <div>
  162 + <i-input></i-input>
  163 + <Button type="ghost" @click="handleTabsAdd" size="small" slot="extra">增加</Button>
  164 +
  165 + <hr style="margin: 10px 0;">
  166 + <Tabs type="card">
  167 + <TabPane v-for="tab in tabs" :key="tab" :label="'Tab' + tab">
  168 + <div>
  169 + <h3>Some text...</h3>
  170 + <i-button>Some focusable content...{{ tab }}</i-button>
  171 + </div>
  172 + </TabPane>
  173 + </Tabs>
  174 + <Tabs type="card">
  175 + <TabPane label="标签一">标签一的内容</TabPane>
  176 + <TabPane label="标签二" disabled>标签二的内容</TabPane>
  177 + <TabPane label="标签三">标签三的内容</TabPane>
10 178 </Tabs>
11 179 </div>
12 180 </template>
... ... @@ -14,13 +182,15 @@
14 182 export default {
15 183 data () {
16 184 return {
17   - name: 'b'
18   - };
  185 + tabs: 2
  186 + }
19 187 },
20 188 methods: {
21   - handleClick (name) {
22   - console.log(name);
  189 + handleTabsAdd () {
  190 + this.tabs ++;
23 191 }
24 192 }
25   - };
  193 + }
26 194 </script>
  195 +
  196 +
... ...
src/components/tabs/tabs.vue
  Show/Hide comments   View file @fce8332
... ... @@ -47,6 +47,19 @@
47 47 else return nextTab;
48 48 };
49 49  
  50 + const focusFirst = (element, root) => {
  51 + try {element.focus();}
  52 + catch(err) {} // eslint-disable-line no-empty
  53 +
  54 + if (document.activeElement == element && element !== root) return true;
  55 +
  56 + const candidates = element.children;
  57 + for (let candidate of candidates) {
  58 + if (focusFirst(candidate, root)) return true;
  59 + }
  60 + return false;
  61 + };
  62 +
50 63 export default {
51 64 name: 'Tabs',
52 65 mixins: [ Emitter ],
... ... @@ -227,7 +240,18 @@
227 240 this.activeKey = this.focusedKey || 0;
228 241 const nextIndex = Math.max(this.navList.findIndex(tab => tab.name === this.focusedKey), 0);
229 242  
230   - this.handleChange(nextIndex);
  243 + [...this.$refs.panes.children].forEach((el, i) => {
  244 + if (nextIndex === i) {
  245 + [...el.children].forEach(child => child.style.display = 'block');
  246 + setTimeout(() => {
  247 + focusFirst(el, el);
  248 + }, transitionTime);
  249 + } else {
  250 + setTimeout(() => {
  251 + [...el.children].forEach(child => child.style.display = 'none');
  252 + }, transitionTime);
  253 + }
  254 + });
231 255 },
232 256 handleRemove (index) {
233 257 const tabs = this.getTabs();
... ... @@ -388,6 +412,8 @@
388 412  
389 413 this.mutationObserver.observe(hiddenParentNode, { attributes: true, childList: true, characterData: true, attributeFilter: ['style'] });
390 414 }
  415 +
  416 + this.handleTabKeyboardSelect();
391 417 },
392 418 beforeDestroy() {
393 419 this.observer.removeListener(this.$refs.navWrap, this.handleResize);
... ...