Commit 02fa0d3fff9a765714644fe6b3ef61f17e0a21e0
Committed by
GitHub
GitHub
Merge pull request #503 from hezhiying/2.0
tabs组件导航区添加右侧slot功能及修改例子文件
Showing
3 changed files
with
36 additions
and
7 deletions
Show diff stats
examples/routers/tabs.vue
| 1 | <template> | 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 | </template> | 17 | </template> |
| 8 | -<script> | 18 | + |
| 19 | + | ||
| 20 | +<script lang="babel"> | ||
| 9 | export default { | 21 | export default { |
| 10 | data () { | 22 | data () { |
| 11 | return { | 23 | return { |
| 24 | + tabs:[ | ||
| 25 | + {label:'标签0',content:'标签内容0'}, | ||
| 26 | + {label:'标签1',content:'标签内容1'}, | ||
| 27 | + {label:'标签2',content:'标签内容2'}, | ||
| 28 | + ], | ||
| 12 | tab0: true, | 29 | tab0: true, |
| 13 | tab1: true, | 30 | tab1: true, |
| 14 | tab2: true | 31 | tab2: true |
| @@ -17,6 +34,9 @@ | @@ -17,6 +34,9 @@ | ||
| 17 | methods: { | 34 | methods: { |
| 18 | handleTagRemove (name) { | 35 | handleTagRemove (name) { |
| 19 | this['tab' + name] = false; | 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,6 +12,7 @@ | ||
| 12 | <Icon v-if="showClose(item)" type="ios-close-empty" @click.native.stop="handleRemove(index)"></Icon> | 12 | <Icon v-if="showClose(item)" type="ios-close-empty" @click.native.stop="handleRemove(index)"></Icon> |
| 13 | </div> | 13 | </div> |
| 14 | </div> | 14 | </div> |
| 15 | + <div :class="[prefixCls + '-nav-right']" v-if="showSlot"><slot name="right"></slot></div> | ||
| 15 | </div> | 16 | </div> |
| 16 | </div> | 17 | </div> |
| 17 | </div> | 18 | </div> |
| @@ -59,7 +60,8 @@ | @@ -59,7 +60,8 @@ | ||
| 59 | navList: [], | 60 | navList: [], |
| 60 | barWidth: 0, | 61 | barWidth: 0, |
| 61 | barOffset: 0, | 62 | barOffset: 0, |
| 62 | - activeKey: this.value | 63 | + activeKey: this.value, |
| 64 | + showSlot:false | ||
| 63 | }; | 65 | }; |
| 64 | }, | 66 | }, |
| 65 | computed: { | 67 | computed: { |
| @@ -225,6 +227,9 @@ | @@ -225,6 +227,9 @@ | ||
| 225 | this.updateBar(); | 227 | this.updateBar(); |
| 226 | this.updateStatus(); | 228 | this.updateStatus(); |
| 227 | } | 229 | } |
| 230 | + }, | ||
| 231 | + mounted(){ | ||
| 232 | + this.showSlot = this.$slots.default !== undefined; | ||
| 228 | } | 233 | } |
| 229 | }; | 234 | }; |
| 230 | </script> | 235 | </script> |
src/styles/components/tabs.less