Commit 087ad37d3f2e09f05907df8cc6e7b1140489fdcb
1 parent
8948742c
update Tabs
Showing
2 changed files
with
19 additions
and
54 deletions
Show diff stats
examples/routers/tabs.vue
| 1 | -<style> | ||
| 2 | - .demo-tabs-style1 > .ivu-tabs-card > .ivu-tabs-content { | ||
| 3 | - height: 120px; | ||
| 4 | - margin-top: -16px; | ||
| 5 | - } | ||
| 6 | - | ||
| 7 | - .demo-tabs-style1 > .ivu-tabs-card > .ivu-tabs-content > .ivu-tabs-tabpane { | ||
| 8 | - background: #fff; | ||
| 9 | - padding: 16px; | ||
| 10 | - } | ||
| 11 | - | ||
| 12 | - .demo-tabs-style1 > .ivu-tabs.ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab { | ||
| 13 | - border-color: transparent; | ||
| 14 | - } | ||
| 15 | - | ||
| 16 | - .demo-tabs-style1 > .ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab-active { | ||
| 17 | - border-color: #fff; | ||
| 18 | - } | ||
| 19 | - .demo-tabs-style2 > .ivu-tabs.ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab{ | ||
| 20 | - border-radius: 0; | ||
| 21 | - background: #fff; | ||
| 22 | - } | ||
| 23 | - .demo-tabs-style2 > .ivu-tabs.ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab-active{ | ||
| 24 | - border-top: 1px solid #3399ff; | ||
| 25 | - } | ||
| 26 | - .demo-tabs-style2 > .ivu-tabs.ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab-active:before{ | ||
| 27 | - content: ''; | ||
| 28 | - display: block; | ||
| 29 | - width: 100%; | ||
| 30 | - height: 1px; | ||
| 31 | - background: #3399ff; | ||
| 32 | - position: absolute; | ||
| 33 | - top: 0; | ||
| 34 | - left: 0; | ||
| 35 | - } | ||
| 36 | -</style> | ||
| 37 | <template> | 1 | <template> |
| 38 | - <Row :gutter="32"> | ||
| 39 | - <i-col span="12" class="demo-tabs-style1" style="background: #e3e8ee;padding:16px;"> | ||
| 40 | - <Tabs type="card"> | ||
| 41 | - <Tab-pane label="标签一">标签一的内容</Tab-pane> | ||
| 42 | - <Tab-pane label="标签二">标签二的内容</Tab-pane> | ||
| 43 | - <Tab-pane label="标签三">标签三的内容</Tab-pane> | ||
| 44 | - </Tabs> | ||
| 45 | - </i-col> | ||
| 46 | - <i-col span="12" class="demo-tabs-style2"> | ||
| 47 | - <Tabs type="card"> | ||
| 48 | - <Tab-pane label="标签一">标签一的内容</Tab-pane> | ||
| 49 | - <Tab-pane label="标签二">标签二的内容</Tab-pane> | ||
| 50 | - <Tab-pane label="标签三">标签三的内容</Tab-pane> | ||
| 51 | - </Tabs> | ||
| 52 | - </i-col> | ||
| 53 | - </Row> | 2 | + <Tabs type="card" closable @on-tab-remove="handleTagRemove"> |
| 3 | + <Tab-pane label="标签一" v-if="tab0">标签一的内容</Tab-pane> | ||
| 4 | + <Tab-pane label="标签二" v-if="tab1">标签二的内容</Tab-pane> | ||
| 5 | + <Tab-pane label="标签三" v-if="tab2">标签三的内容</Tab-pane> | ||
| 6 | + </Tabs> | ||
| 54 | </template> | 7 | </template> |
| 55 | <script> | 8 | <script> |
| 56 | export default { | 9 | export default { |
| 57 | - | 10 | + data () { |
| 11 | + return { | ||
| 12 | + tab0: true, | ||
| 13 | + tab1: true, | ||
| 14 | + tab2: true | ||
| 15 | + } | ||
| 16 | + }, | ||
| 17 | + methods: { | ||
| 18 | + handleTagRemove (name) { | ||
| 19 | + this['tab' + name] = false; | ||
| 20 | + } | ||
| 21 | + } | ||
| 58 | } | 22 | } |
| 59 | </script> | 23 | </script> |
src/components/tabs/tabs.vue
| @@ -181,7 +181,7 @@ | @@ -181,7 +181,7 @@ | ||
| 181 | handleRemove (index) { | 181 | handleRemove (index) { |
| 182 | const tabs = this.getTabs(); | 182 | const tabs = this.getTabs(); |
| 183 | const tab = tabs[index]; | 183 | const tab = tabs[index]; |
| 184 | - tab.$destroy(true); | 184 | + tab.$destroy(); |
| 185 | 185 | ||
| 186 | if (tab.currentName === this.activeKey) { | 186 | if (tab.currentName === this.activeKey) { |
| 187 | const newTabs = this.getTabs(); | 187 | const newTabs = this.getTabs(); |
| @@ -200,6 +200,7 @@ | @@ -200,6 +200,7 @@ | ||
| 200 | } | 200 | } |
| 201 | } | 201 | } |
| 202 | this.activeKey = activeKey; | 202 | this.activeKey = activeKey; |
| 203 | + this.$emit('input', activeKey); | ||
| 203 | } | 204 | } |
| 204 | this.$emit('on-tab-remove', tab.currentName); | 205 | this.$emit('on-tab-remove', tab.currentName); |
| 205 | this.updateNav(); | 206 | this.updateNav(); |