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

fixed tab bug

examples/docs/tabs.md

@@ -18,6 +18,14 @@
         activeName: '3',
         activeName2: ''
       }
+    },
+    methods: {
+      handleRemove(tab) {
+        console.log(tab);
+      },
+      handleClick(tab) {
+        console.log(tab);
+      }
     }
   }
 </script>
@@ -70,7 +78,7 @@
 ## 可关闭的标签
 
 <div>
-  <el-tabs type="card" :closable="true">
+  <el-tabs type="card" :closable="true" :on-remove="handleRemove" :on-click="handleClick">
     <el-tab-pane label="选项卡一">选项卡一内容</el-tab-pane>
     <el-tab-pane label="选项卡二">选项卡二内容</el-tab-pane>
     <el-tab-pane label="选项卡三">选项卡三内容</el-tab-pane>
@@ -80,7 +88,7 @@
 {{activeName2}}
 
 ```html
-<el-tabs type="card" :closable="true">
+<el-tabs type="card" :closable="true" :on-remove="handleRemove" :on-click="handleClick">
   <el-tab-pane label="选项卡一">选项卡一内容</el-tab-pane>
   <el-tab-pane label="选项卡二">选项卡二内容</el-tab-pane>
   <el-tab-pane label="选项卡三">选项卡三内容</el-tab-pane>

packages/tabs/src/tab.vue

@@ -24,7 +24,7 @@
     <span
       class="el-icon-close"
       v-if="closable"
-      @click="$emit('onremove', tab, $event)">
+      @click="$emit('remove', tab, $event)">
     </span>
   </div>
 </template>

packages/tabs/src/tabs.vue

@@ -1,6 +1,8 @@
 <script>
   import ElTab from './tab';
 
+  function noop() {}
+
   module.exports = {
     name: 'el-tabs',
 
@@ -14,6 +16,14 @@
       defaultActiveName: String,
       activeName: String,
       closable: false,
+      onRemove: {
+        type: Function,
+        default: noop
+      },
+      onClick: {
+        type: Function,
+        default: noop
+      },
       tabWidth: 0
     },
 
@@ -41,7 +51,7 @@
     },
 
     methods: {
-      removeTab(tab, ev) {
+      handleTabRemove(tab, ev) {
         ev.stopPropagation();
         tab.$destroy(true);
 
@@ -58,11 +68,11 @@
 
           this.currentName = nextChild ? nextChild.key : prevChild ? prevChild.key : '-1';
         }
-        this.$emit('tab.remove', tab);
+        this.onRemove(tab.key);
       },
       handleTabClick(tab) {
         this.currentName = tab.key;
-        this.$emit('tab.click', tab);
+        this.onClick(tab.key);
       },
       calcBarStyle() {
         if (this.type) return {};
@@ -106,7 +116,7 @@
         ref="tabs"
         :tab="tab"
         :closable="closable"
-        @onremove="removeTab"
+        @remove="handleTabRemove"
         @click.native="handleTabClick(tab)">
       </el-tab>
       <div