tabs组件导航区添加右侧slot功能及修改例子文件

examples/routers/tabs.vue

@@ -1,14 +1,31 @@
 <template>
-    <Tabs type="card" closable @on-tab-remove="handleTagRemove">
+    <Row>
-        <Tab-pane label="标签一" v-if="tab0">标签一的内容</Tab-pane>
+        <Col :span="12">
-        <Tab-pane label="标签二" v-if="tab1">标签二的内容</Tab-pane>
+            <Tabs type="card" closable @on-tab-remove="handleTagRemove">
-        <Tab-pane label="标签三" v-if="tab2">标签三的内容</Tab-pane>
+                <Tab-pane label="标签一" v-if="tab0">标签一的内容</Tab-pane>
-    </Tabs>
+                <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});
             }
         }
     }

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>

src/styles/components/tabs.less

@@ -54,6 +54,10 @@
         white-space: nowrap;
     }
 
+    &-nav-right{
+        float: right;
+    }
+
     &-nav {
         padding-left: 0;
         margin: 0;