Commit 77bafb3181e5dae09817aed0471ec38cc8963ba2
1 parent
17f52abf
update Tabs
updata
Showing
4 changed files
with
21 additions
and
9 deletions
Show diff stats
src/components/tabs/pane.vue
src/components/tabs/tabs.vue
| @@ -74,13 +74,17 @@ | @@ -74,13 +74,17 @@ | ||
| 74 | contentClasses () { | 74 | contentClasses () { |
| 75 | return [ | 75 | return [ |
| 76 | `${prefixCls}-content`, | 76 | `${prefixCls}-content`, |
| 77 | - `${prefixCls}-content-animated` | 77 | + { |
| 78 | + [`${prefixCls}-content-animated`]: this.animated | ||
| 79 | + } | ||
| 78 | ] | 80 | ] |
| 79 | }, | 81 | }, |
| 80 | barClasses () { | 82 | barClasses () { |
| 81 | return [ | 83 | return [ |
| 82 | `${prefixCls}-ink-bar`, | 84 | `${prefixCls}-ink-bar`, |
| 83 | - `${prefixCls}-ink-bar-animated` | 85 | + { |
| 86 | + [`${prefixCls}-ink-bar-animated`]: this.animated | ||
| 87 | + } | ||
| 84 | ] | 88 | ] |
| 85 | }, | 89 | }, |
| 86 | contentStyle () { | 90 | contentStyle () { |
| @@ -98,10 +102,14 @@ | @@ -98,10 +102,14 @@ | ||
| 98 | barStyle () { | 102 | barStyle () { |
| 99 | let style = { | 103 | let style = { |
| 100 | display: 'none', | 104 | display: 'none', |
| 101 | - width: `${this.barWidth}px`, | ||
| 102 | - transform: `translate3d(${this.barOffset}px, 0px, 0px)` | 105 | + width: `${this.barWidth}px` |
| 103 | }; | 106 | }; |
| 104 | if (this.type === 'line') style.display = 'block'; | 107 | if (this.type === 'line') style.display = 'block'; |
| 108 | + if (this.animated) { | ||
| 109 | + style.transform = `translate3d(${this.barOffset}px, 0px, 0px)`; | ||
| 110 | + } else { | ||
| 111 | + style.left = `${this.barOffset}px`; | ||
| 112 | + } | ||
| 105 | 113 | ||
| 106 | return style; | 114 | return style; |
| 107 | } | 115 | } |
| @@ -124,6 +132,7 @@ | @@ -124,6 +132,7 @@ | ||
| 124 | if (!this.activeKey) this.activeKey = pane.key || index; | 132 | if (!this.activeKey) this.activeKey = pane.key || index; |
| 125 | } | 133 | } |
| 126 | }); | 134 | }); |
| 135 | + this.updateStatus(); | ||
| 127 | this.updateBar(); | 136 | this.updateBar(); |
| 128 | }, | 137 | }, |
| 129 | updateBar () { | 138 | updateBar () { |
| @@ -146,6 +155,10 @@ | @@ -146,6 +155,10 @@ | ||
| 146 | } | 155 | } |
| 147 | }); | 156 | }); |
| 148 | }, | 157 | }, |
| 158 | + updateStatus () { | ||
| 159 | + const tabs = this.getTabs(); | ||
| 160 | + tabs.forEach(tab => tab.show = (tab.key === this.activeKey) || this.animated); | ||
| 161 | + }, | ||
| 149 | tabCls (item) { | 162 | tabCls (item) { |
| 150 | return [ | 163 | return [ |
| 151 | `${prefixCls}-tab`, | 164 | `${prefixCls}-tab`, |
| @@ -159,6 +172,7 @@ | @@ -159,6 +172,7 @@ | ||
| 159 | const nav = this.navList[index]; | 172 | const nav = this.navList[index]; |
| 160 | if (nav.disabled) return; | 173 | if (nav.disabled) return; |
| 161 | this.activeKey = nav.key; | 174 | this.activeKey = nav.key; |
| 175 | + this.updateStatus(); | ||
| 162 | this.$emit('on-click', nav.key); | 176 | this.$emit('on-click', nav.key); |
| 163 | }, | 177 | }, |
| 164 | handleRemove (index) { | 178 | handleRemove (index) { |
src/styles/components/tabs.less
| @@ -194,9 +194,7 @@ | @@ -194,9 +194,7 @@ | ||
| 194 | 194 | ||
| 195 | .@{tabs-prefix-cls}-no-animation{ | 195 | .@{tabs-prefix-cls}-no-animation{ |
| 196 | .@{tabs-prefix-cls}-content { | 196 | .@{tabs-prefix-cls}-content { |
| 197 | - &-animated { | ||
| 198 | - transform: none!important; | ||
| 199 | - } | 197 | + transform: none!important; |
| 200 | 198 | ||
| 201 | > .@{tabs-prefix-cls}-tabpane-inactive { | 199 | > .@{tabs-prefix-cls}-tabpane-inactive { |
| 202 | display: none; | 200 | display: none; |
test/routers/tabs.vue
| 1 | <template> | 1 | <template> |
| 2 | - <i-button @click="toggleClose" :animated="false">closable</i-button> | 2 | + <i-button @click="toggleClose">closable</i-button> |
| 3 | 3 | ||
| 4 | <Tabs type="line" :closable="closable" :animated="false"> | 4 | <Tabs type="line" :closable="closable" :animated="false"> |
| 5 | <Tab-pane label="Tab 1">Tab1 content</Tab-pane> | 5 | <Tab-pane label="Tab 1">Tab1 content</Tab-pane> |