Commit c4eb5dcffd6ba38e939559ab35e10916900fa39c
1 parent
5e7ad5e0
tabs组件导航区添加右侧slot功能及修改例子文件
Showing
3 changed files
with
36 additions
and
7 deletions
Show diff stats
examples/routers/tabs.vue
| 1 | 1 | <template> |
| 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> | |
| 2 | + <Row> | |
| 3 | + <Col :span="12"> | |
| 4 | + <Tabs type="card" closable @on-tab-remove="handleTagRemove"> | |
| 5 | + <Tab-pane label="标签一" v-if="tab0">标签一的内容</Tab-pane> | |
| 6 | + <Tab-pane label="标签二" v-if="tab1">标签二的内容</Tab-pane> | |
| 7 | + <Tab-pane label="标签三" v-if="tab2">标签三的内容</Tab-pane> | |
| 8 | + </Tabs> | |
| 9 | + </Col> | |
| 10 | + <Col :span="12"> | |
| 11 | + <Tabs type="card" closable @on-tab-remove="handleTagRemove"> | |
| 12 | + <Tab-pane :label="tab.label" v-for="tab of tabs">{{tab.content}}</Tab-pane> | |
| 13 | + <Button size="small" slot="right" @click="addTab">添加</Button> | |
| 14 | + </Tabs> | |
| 15 | + </Col> | |
| 16 | + </Row> | |
| 7 | 17 | </template> |
| 8 | -<script> | |
| 18 | + | |
| 19 | + | |
| 20 | +<script lang="babel"> | |
| 9 | 21 | export default { |
| 10 | 22 | data () { |
| 11 | 23 | return { |
| 24 | + tabs:[ | |
| 25 | + {label:'标签0',content:'标签内容0'}, | |
| 26 | + {label:'标签1',content:'标签内容1'}, | |
| 27 | + {label:'标签2',content:'标签内容2'}, | |
| 28 | + ], | |
| 12 | 29 | tab0: true, |
| 13 | 30 | tab1: true, |
| 14 | 31 | tab2: true |
| ... | ... | @@ -17,6 +34,9 @@ |
| 17 | 34 | methods: { |
| 18 | 35 | handleTagRemove (name) { |
| 19 | 36 | this['tab' + name] = false; |
| 37 | + }, | |
| 38 | + addTab(){ | |
| 39 | + this.tabs.push({label:'标签'+this.tabs.length,content:'标签内容'+this.tabs.length}); | |
| 20 | 40 | } |
| 21 | 41 | } |
| 22 | 42 | } | ... | ... |
src/components/tabs/tabs.vue
| ... | ... | @@ -12,6 +12,7 @@ |
| 12 | 12 | <Icon v-if="showClose(item)" type="ios-close-empty" @click.native.stop="handleRemove(index)"></Icon> |
| 13 | 13 | </div> |
| 14 | 14 | </div> |
| 15 | + <div :class="[prefixCls + '-nav-right']" v-if="showSlot"><slot name="right"></slot></div> | |
| 15 | 16 | </div> |
| 16 | 17 | </div> |
| 17 | 18 | </div> |
| ... | ... | @@ -59,7 +60,8 @@ |
| 59 | 60 | navList: [], |
| 60 | 61 | barWidth: 0, |
| 61 | 62 | barOffset: 0, |
| 62 | - activeKey: this.value | |
| 63 | + activeKey: this.value, | |
| 64 | + showSlot:false | |
| 63 | 65 | }; |
| 64 | 66 | }, |
| 65 | 67 | computed: { |
| ... | ... | @@ -225,6 +227,9 @@ |
| 225 | 227 | this.updateBar(); |
| 226 | 228 | this.updateStatus(); |
| 227 | 229 | } |
| 230 | + }, | |
| 231 | + mounted(){ | |
| 232 | + this.showSlot = this.$slots.default !== undefined; | |
| 228 | 233 | } |
| 229 | 234 | }; |
| 230 | 235 | </script> | ... | ... |