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