other / mew-iview

Commit d45e919663364efb627ebd421fcc4efc62ee383d

Authored by 梁灏
1 parent ce7b39c2

update Tabs keyboard logic and support @on-click event

Showing 2 changed files with 14 additions and 210 deletions   Show diff stats
Inline Side-by-side
examples/routers/tabs.vue
  Show/Hide comments   View file @d45e919
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 -  
160 <template> 1 <template>
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> 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>
178 </Tabs> 10 </Tabs>
179 </div> 11 </div>
180 </template> 12 </template>
@@ -182,15 +14,13 @@ @@ -182,15 +14,13 @@
182 export default { 14 export default {
183 data () { 15 data () {
184 return { 16 return {
185 - tabs: 2  
186 - } 17 + name: 'b'
  18 + };
187 }, 19 },
188 methods: { 20 methods: {
189 - handleTabsAdd () {  
190 - this.tabs ++; 21 + handleClick (name) {
  22 + console.log(name);
191 } 23 }
192 } 24 }
193 - } 25 + };
194 </script> 26 </script>
195 -  
196 -  
src/components/tabs/tabs.vue
  Show/Hide comments   View file @d45e919
@@ -47,19 +47,6 @@ @@ -47,19 +47,6 @@
47 else return nextTab; 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 -  
63 export default { 50 export default {
64 name: 'Tabs', 51 name: 'Tabs',
65 mixins: [ Emitter ], 52 mixins: [ Emitter ],
@@ -240,18 +227,7 @@ @@ -240,18 +227,7 @@
240 this.activeKey = this.focusedKey || 0; 227 this.activeKey = this.focusedKey || 0;
241 const nextIndex = Math.max(this.navList.findIndex(tab => tab.name === this.focusedKey), 0); 228 const nextIndex = Math.max(this.navList.findIndex(tab => tab.name === this.focusedKey), 0);
242 229
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 - }); 230 + this.handleChange(nextIndex);
255 }, 231 },
256 handleRemove (index) { 232 handleRemove (index) {
257 const tabs = this.getTabs(); 233 const tabs = this.getTabs();
@@ -412,8 +388,6 @@ @@ -412,8 +388,6 @@
412 388
413 this.mutationObserver.observe(hiddenParentNode, { attributes: true, childList: true, characterData: true, attributeFilter: ['style'] }); 389 this.mutationObserver.observe(hiddenParentNode, { attributes: true, childList: true, characterData: true, attributeFilter: ['style'] });
414 } 390 }
415 -  
416 - this.handleTabKeyboardSelect();  
417 }, 391 },
418 beforeDestroy() { 392 beforeDestroy() {
419 this.observer.removeListener(this.$refs.navWrap, this.handleResize); 393 this.observer.removeListener(this.$refs.navWrap, this.handleResize);