Merge pull request #2156 from marxy/tabs-scroll

Tabs add scroll

examples/routers/tabs.vue

@@ -70,7 +70,7 @@
 <!--</script>-->
 
 
-<template>
+<!-- <template>
     <Tabs type="card" closable @on-tab-remove="handleTabRemove">
         <TabPane label="标签一" v-if="tab0">标签一的内容</TabPane>
         <TabPane label="标签二" v-if="tab1">标签二的内容</TabPane>
@@ -92,4 +92,41 @@
             }
         }
     }
+</script> -->
+
+<template>
+    <div>
+    <Button type="ghost" @click="toFirst" size="small">to first</Button>
+    <Button type="ghost" @click="toLast" size="small">to last</Button>
+    <Tabs type="card" :animated="animated"  v-model="activeTab">
+        <TabPane v-for="tab in tabs" :key="tab" :label="'标签' + tab"  :name="tab+''" closable>标签{{ tab }}</TabPane>
+        <div slot="extra">
+            <Button type="ghost" @click="handleTabsAdd" size="small">增加</Button>
+        </div>
+    </Tabs>
+    </div>
+</template>
+<script>
+    export default {
+        data () {
+            return {
+                tabs: 2,
+                activeTab:"2",
+                animated:true
+            }
+        },
+        methods: {
+            handleTabsAdd () {
+                this.tabs ++;
+                this.activeTab = this.tabs + '';
+            },
+            toFirst () {
+                this.activeTab = '1';
+            },
+            toLast () {
+                this.activeTab = this.tabs+'';
+            }
+        }
+    }
 </script>
+