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 | 74 | contentClasses () { |
| 75 | 75 | return [ |
| 76 | 76 | `${prefixCls}-content`, |
| 77 | - `${prefixCls}-content-animated` | |
| 77 | + { | |
| 78 | + [`${prefixCls}-content-animated`]: this.animated | |
| 79 | + } | |
| 78 | 80 | ] |
| 79 | 81 | }, |
| 80 | 82 | barClasses () { |
| 81 | 83 | return [ |
| 82 | 84 | `${prefixCls}-ink-bar`, |
| 83 | - `${prefixCls}-ink-bar-animated` | |
| 85 | + { | |
| 86 | + [`${prefixCls}-ink-bar-animated`]: this.animated | |
| 87 | + } | |
| 84 | 88 | ] |
| 85 | 89 | }, |
| 86 | 90 | contentStyle () { |
| ... | ... | @@ -98,10 +102,14 @@ |
| 98 | 102 | barStyle () { |
| 99 | 103 | let style = { |
| 100 | 104 | display: 'none', |
| 101 | - width: `${this.barWidth}px`, | |
| 102 | - transform: `translate3d(${this.barOffset}px, 0px, 0px)` | |
| 105 | + width: `${this.barWidth}px` | |
| 103 | 106 | }; |
| 104 | 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 | 114 | return style; |
| 107 | 115 | } |
| ... | ... | @@ -124,6 +132,7 @@ |
| 124 | 132 | if (!this.activeKey) this.activeKey = pane.key || index; |
| 125 | 133 | } |
| 126 | 134 | }); |
| 135 | + this.updateStatus(); | |
| 127 | 136 | this.updateBar(); |
| 128 | 137 | }, |
| 129 | 138 | updateBar () { |
| ... | ... | @@ -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 | 162 | tabCls (item) { |
| 150 | 163 | return [ |
| 151 | 164 | `${prefixCls}-tab`, |
| ... | ... | @@ -159,6 +172,7 @@ |
| 159 | 172 | const nav = this.navList[index]; |
| 160 | 173 | if (nav.disabled) return; |
| 161 | 174 | this.activeKey = nav.key; |
| 175 | + this.updateStatus(); | |
| 162 | 176 | this.$emit('on-click', nav.key); |
| 163 | 177 | }, |
| 164 | 178 | handleRemove (index) { | ... | ... |
src/styles/components/tabs.less
test/routers/tabs.vue