Commit 7a737482f0692f618150818aead926a2bbb14d52
1 parent
d0788ae9
fixed #206
fixed #206
Showing
3 changed files
with
25 additions
and
14 deletions
Show diff stats
src/components/tabs/pane.vue
src/components/tabs/tabs.vue
| @@ -9,7 +9,7 @@ | @@ -9,7 +9,7 @@ | ||
| 9 | <div :class="tabCls(item)" v-for="item in navList" @click="handleChange($index)"> | 9 | <div :class="tabCls(item)" v-for="item in navList" @click="handleChange($index)"> |
| 10 | <Icon v-if="item.icon !== ''" :type="item.icon"></Icon> | 10 | <Icon v-if="item.icon !== ''" :type="item.icon"></Icon> |
| 11 | {{ item.label }} | 11 | {{ item.label }} |
| 12 | - <Icon v-if="closable && type === 'card'" type="ios-close-empty" @click.stop="handleRemove($index)"></Icon> | 12 | + <Icon v-if="showClose(item)" type="ios-close-empty" @click.stop="handleRemove($index)"></Icon> |
| 13 | </div> | 13 | </div> |
| 14 | </div> | 14 | </div> |
| 15 | </div> | 15 | </div> |
| @@ -125,7 +125,8 @@ | @@ -125,7 +125,8 @@ | ||
| 125 | label: pane.label, | 125 | label: pane.label, |
| 126 | icon: pane.icon || '', | 126 | icon: pane.icon || '', |
| 127 | key: pane.key || index, | 127 | key: pane.key || index, |
| 128 | - disabled: pane.disabled | 128 | + disabled: pane.disabled, |
| 129 | + closable: pane.closable | ||
| 129 | }); | 130 | }); |
| 130 | if (!pane.key) pane.key = index; | 131 | if (!pane.key) pane.key = index; |
| 131 | if (index === 0) { | 132 | if (index === 0) { |
| @@ -199,6 +200,17 @@ | @@ -199,6 +200,17 @@ | ||
| 199 | } | 200 | } |
| 200 | this.$emit('on-tab-remove', tab.key); | 201 | this.$emit('on-tab-remove', tab.key); |
| 201 | this.updateNav(); | 202 | this.updateNav(); |
| 203 | + }, | ||
| 204 | + showClose (item) { | ||
| 205 | + if (this.type === 'card') { | ||
| 206 | + if (item.closable !== null) { | ||
| 207 | + return item.closable; | ||
| 208 | + } else { | ||
| 209 | + return this.closable; | ||
| 210 | + } | ||
| 211 | + } else { | ||
| 212 | + return false; | ||
| 213 | + } | ||
| 202 | } | 214 | } |
| 203 | }, | 215 | }, |
| 204 | watch: { | 216 | watch: { |
test/routers/tabs.vue
| 1 | <template> | 1 | <template> |
| 2 | - <Tabs :active-key.sync="activeKey" :animated="true"> | 2 | + <Tabs active-key="key1"> |
| 3 | <Tab-pane label="标签一" key="key1">标签一的内容</Tab-pane> | 3 | <Tab-pane label="标签一" key="key1">标签一的内容</Tab-pane> |
| 4 | <Tab-pane label="标签二" key="key2">标签二的内容</Tab-pane> | 4 | <Tab-pane label="标签二" key="key2">标签二的内容</Tab-pane> |
| 5 | <Tab-pane label="标签三" key="key3">标签三的内容</Tab-pane> | 5 | <Tab-pane label="标签三" key="key3">标签三的内容</Tab-pane> |
| 6 | </Tabs> | 6 | </Tabs> |
| 7 | - <i-button @click="change">change</i-button> | 7 | + <Tabs type="card" > |
| 8 | + <Tab-pane label="标签一">标签一的内容</Tab-pane> | ||
| 9 | + <Tab-pane label="标签二" :closable="true">标签二的内容</Tab-pane> | ||
| 10 | + <Tab-pane label="标签三">标签三的内容</Tab-pane> | ||
| 11 | + </Tabs> | ||
| 8 | </template> | 12 | </template> |
| 9 | <script> | 13 | <script> |
| 10 | export default { | 14 | export default { |
| 11 | - data () { | ||
| 12 | - return { | ||
| 13 | - activeKey: 'key2' | ||
| 14 | - } | ||
| 15 | - }, | ||
| 16 | - methods: { | ||
| 17 | - change () { | ||
| 18 | - this.activeKey = 'key1'; | ||
| 19 | - } | ||
| 20 | - } | 15 | + |
| 21 | } | 16 | } |
| 22 | </script> | 17 | </script> |