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 | 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 | 7 | </template> |
| 55 | 8 | <script> |
| 56 | 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 | 23 | </script> | ... | ... |
src/components/tabs/tabs.vue
| ... | ... | @@ -181,7 +181,7 @@ |
| 181 | 181 | handleRemove (index) { |
| 182 | 182 | const tabs = this.getTabs(); |
| 183 | 183 | const tab = tabs[index]; |
| 184 | - tab.$destroy(true); | |
| 184 | + tab.$destroy(); | |
| 185 | 185 | |
| 186 | 186 | if (tab.currentName === this.activeKey) { |
| 187 | 187 | const newTabs = this.getTabs(); |
| ... | ... | @@ -200,6 +200,7 @@ |
| 200 | 200 | } |
| 201 | 201 | } |
| 202 | 202 | this.activeKey = activeKey; |
| 203 | + this.$emit('input', activeKey); | |
| 203 | 204 | } |
| 204 | 205 | this.$emit('on-tab-remove', tab.currentName); |
| 205 | 206 | this.updateNav(); | ... | ... |