Merge pull request #92 from eleme/feat/fixed-tab

fixed tab bug

examples/docs/tabs.md

@@ -23,8 +23,8 @@
       handleRemove(tab) {
         console.log(tab);
       },
-      handleClick(tab) {
-        console.log(tab);
+      handleClick(tab, event) {
+        console.log(tab, event);
       }
     }
   }
@@ -38,7 +38,7 @@
 ## 基础使用
 
 <div>
-  <el-tabs :active-name="activeName">
+  <el-tabs>
     <el-tab-pane label="选项卡一">选项卡一内容</el-tab-pane>
     <el-tab-pane label="选项卡二">选项卡二内容</el-tab-pane>
     <el-tab-pane label="选项卡三">选项卡三内容</el-tab-pane>
@@ -121,10 +121,9 @@
 |---------- |-------- |---------- |-------------  |-------- |
 | type     | 风格类型   | string   | card, border-card  |         |
 | closable  | 真实值   | boolean   | true, false |  false  |
-| defaultActiveName  | 如果没有设置 activeName, 则使用该值 | string    |     | 第一个面板  |
 | activeName  | 当前选中面板的 name  | string   |    |    |
-| tab.click  | tab 被点击的回调  | string   |    |    |
-| tab.remove  | tab 被删除的回调  | string   |    |    |
+| on-click  | tab 被点击的钩子  | string   |    |    |
+| on-remove  | tab 被删除的钩子  | string   |    |    |
 
 ## TAB-PANE API
 | 参数       | 说明     | 类型      | 可选值       | 默认值   |

packages/tabs/src/tabs.vue

@@ -13,7 +13,6 @@
     props: {
       type: String,
       tabPosition: String,
-      defaultActiveName: String,
       activeName: String,
       closable: false,
       onRemove: {
@@ -39,9 +38,8 @@
 
     watch: {
       activeName: {
-        immediate: true,
         handler(val) {
-          this.currentName = val || 0;
+          this.currentName = val || this.$children[0].key;
         }
       },
 
@@ -70,12 +68,12 @@
         }
         this.onRemove(tab.key);
       },
-      handleTabClick(tab) {
+      handleTabClick(tab, event) {
         this.currentName = tab.key;
-        this.onClick(tab.key);
+        this.onClick(tab.key, event);
       },
       calcBarStyle() {
-        if (this.type) return {};
+        if (this.type || !this.$refs.tabs) return {};
         var style = {};
         var offset = 0;
         var tabWidth = 0;
@@ -100,7 +98,7 @@
 
     mounted() {
       if (!this.currentName) {
-        this.currentName = this.defaultActiveName || this.$children[0].key;
+        this.currentName = this.$children[0].key;
       }
       this.$children.forEach(tab => this.tabs.push(tab));
       this.$nextTick(() => this.calcBarStyle());
@@ -117,7 +115,7 @@
         :tab="tab"
         :closable="closable"
         @remove="handleTabRemove"
-        @click.native="handleTabClick(tab)">
+        @click.native="handleTabClick(tab, $event)">
       </el-tab>
       <div
         class="el-tabs__active-bar"