From c4eb5dcffd6ba38e939559ab35e10916900fa39c Mon Sep 17 00:00:00 2001
From: H <21418592@qq.com>
Date: Mon, 27 Mar 2017 13:28:37 +0800
Subject: [PATCH] tabs组件导航区添加右侧slot功能及修改例子文件
---
examples/routers/tabs.vue | 32 ++++++++++++++++++++++++++------
src/components/tabs/tabs.vue | 7 ++++++-
src/styles/components/tabs.less | 4 ++++
3 files changed, 36 insertions(+), 7 deletions(-)
diff --git a/examples/routers/tabs.vue b/examples/routers/tabs.vue
index 24792d4..e18eb4a 100644
--- a/examples/routers/tabs.vue
+++ b/examples/routers/tabs.vue
@@ -1,14 +1,31 @@
<template>
- <Tabs type="card" closable @on-tab-remove="handleTagRemove">
- <Tab-pane label="标签一" v-if="tab0">标签一的内容</Tab-pane>
- <Tab-pane label="标签二" v-if="tab1">标签二的内容</Tab-pane>
- <Tab-pane label="标签三" v-if="tab2">标签三的内容</Tab-pane>
- </Tabs>
+ <Row>
+ <Col :span="12">
+ <Tabs type="card" closable @on-tab-remove="handleTagRemove">
+ <Tab-pane label="标签一" v-if="tab0">标签一的内容</Tab-pane>
+ <Tab-pane label="标签二" v-if="tab1">标签二的内容</Tab-pane>
+ <Tab-pane label="标签三" v-if="tab2">标签三的内容</Tab-pane>
+ </Tabs>
+ </Col>
+ <Col :span="12">
+ <Tabs type="card" closable @on-tab-remove="handleTagRemove">
+ <Tab-pane :label="tab.label" v-for="tab of tabs">{{tab.content}}</Tab-pane>
+ <Button size="small" slot="right" @click="addTab">添加</Button>
+ </Tabs>
+ </Col>
+ </Row>
</template>
-<script>
+
+
+<script lang="babel">
export default {
data () {
return {
+ tabs:[
+ {label:'标签0',content:'标签内容0'},
+ {label:'标签1',content:'标签内容1'},
+ {label:'标签2',content:'标签内容2'},
+ ],
tab0: true,
tab1: true,
tab2: true
@@ -17,6 +34,9 @@
methods: {
handleTagRemove (name) {
this['tab' + name] = false;
+ },
+ addTab(){
+ this.tabs.push({label:'标签'+this.tabs.length,content:'标签内容'+this.tabs.length});
}
}
}
diff --git a/src/components/tabs/tabs.vue b/src/components/tabs/tabs.vue
index 6f3e49c..e1c4146 100644
--- a/src/components/tabs/tabs.vue
+++ b/src/components/tabs/tabs.vue
@@ -12,6 +12,7 @@
<Icon v-if="showClose(item)" type="ios-close-empty" @click.native.stop="handleRemove(index)"></Icon>
</div>
</div>
+ <div :class="[prefixCls + '-nav-right']" v-if="showSlot"><slot name="right"></slot></div>
</div>
</div>
</div>
@@ -59,7 +60,8 @@
navList: [],
barWidth: 0,
barOffset: 0,
- activeKey: this.value
+ activeKey: this.value,
+ showSlot:false
};
},
computed: {
@@ -225,6 +227,9 @@
this.updateBar();
this.updateStatus();
}
+ },
+ mounted(){
+ this.showSlot = this.$slots.default !== undefined;
}
};
</script>
diff --git a/src/styles/components/tabs.less b/src/styles/components/tabs.less
index 3a3a79d..6aad844 100644
--- a/src/styles/components/tabs.less
+++ b/src/styles/components/tabs.less
@@ -54,6 +54,10 @@
white-space: nowrap;
}
+ &-nav-right{
+ float: right;
+ }
+
&-nav {
padding-left: 0;
margin: 0;
--
libgit2 0.21.4