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 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 10 </Tabs>
179 11 </div>
180 12 </template>
... ... @@ -182,15 +14,13 @@
182 14 export default {
183 15 data () {
184 16 return {
185   - tabs: 2
186   - }
  17 + name: 'b'
  18 + };
187 19 },
188 20 methods: {
189   - handleTabsAdd () {
190   - this.tabs ++;
  21 + handleClick (name) {
  22 + console.log(name);
191 23 }
192 24 }
193   - }
  25 + };
194 26 </script>
195   -
196   -
... ...
src/components/tabs/tabs.vue
  Show/Hide comments   View file @d45e919
... ... @@ -47,19 +47,6 @@
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   -
63 50 export default {
64 51 name: 'Tabs',
65 52 mixins: [ Emitter ],
... ... @@ -240,18 +227,7 @@
240 227 this.activeKey = this.focusedKey || 0;
241 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 232 handleRemove (index) {
257 233 const tabs = this.getTabs();
... ... @@ -412,8 +388,6 @@
412 388  
413 389 this.mutationObserver.observe(hiddenParentNode, { attributes: true, childList: true, characterData: true, attributeFilter: ['style'] });
414 390 }
415   -
416   - this.handleTabKeyboardSelect();
417 391 },
418 392 beforeDestroy() {
419 393 this.observer.removeListener(this.$refs.navWrap, this.handleResize);
... ...