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

tab events

examples/docs/tabs.md

@@ -38,7 +38,7 @@
 ## 基础使用
 
 <div>
-  <el-tabs>
+  <el-tabs :active-name="activeName">
     <el-tab-pane label="选项卡一">选项卡一内容</el-tab-pane>
     <el-tab-pane label="选项卡二">选项卡二内容</el-tab-pane>
     <el-tab-pane label="选项卡三">选项卡三内容</el-tab-pane>
@@ -78,7 +78,7 @@
 ## 可关闭的标签
 
 <div>
-  <el-tabs type="card" :closable="true" :on-remove="handleRemove" :on-click="handleClick">
+  <el-tabs type="card" :closable="true" @tab-remove="handleRemove" @tab-click="handleClick">
     <el-tab-pane label="选项卡一">选项卡一内容</el-tab-pane>
     <el-tab-pane label="选项卡二">选项卡二内容</el-tab-pane>
     <el-tab-pane label="选项卡三">选项卡三内容</el-tab-pane>
@@ -88,7 +88,7 @@
 {{activeName2}}
 
 ```html
-<el-tabs type="card" :closable="true" :on-remove="handleRemove" :on-click="handleClick">
+<el-tabs type="card" :closable="true" @tab-remove="handleRemove" @tab-click="handleClick">
   <el-tab-pane label="选项卡一">选项卡一内容</el-tab-pane>
   <el-tab-pane label="选项卡二">选项卡二内容</el-tab-pane>
   <el-tab-pane label="选项卡三">选项卡三内容</el-tab-pane>
@@ -122,8 +122,8 @@
 | type     | 风格类型   | string   | card, border-card  |         |
 | closable  | 真实值   | boolean   | true, false |  false  |
 | activeName  | 当前选中面板的 name  | string   |    |    |
-| on-click  | tab 被点击的钩子  | string   |    |    |
-| on-remove  | tab 被删除的钩子  | string   |    |    |
+| tab-click  | tab 被点击的钩子  | string   |    |    |
+| tab-remove  | tab 被删除的钩子  | string   |    |    |
 
 ## TAB-PANE API
 | 参数       | 说明     | 类型      | 可选值       | 默认值   |

packages/tabs/src/tabs.vue

@@ -1,8 +1,6 @@
 <script>
   import ElTab from './tab';
 
-  function noop() {}
-
   module.exports = {
     name: 'el-tabs',
 
@@ -15,14 +13,6 @@
       tabPosition: String,
       activeName: String,
       closable: false,
-      onRemove: {
-        type: Function,
-        default: noop
-      },
-      onClick: {
-        type: Function,
-        default: noop
-      },
       tabWidth: 0
     },
 
@@ -39,7 +29,8 @@
     watch: {
       activeName: {
         handler(val) {
-          this.currentName = val || this.$children[0].key;
+          var fisrtKey = this.$children[0] && this.$children[0].key || '1';
+          this.currentName = val || fisrtKey;
         }
       },
 
@@ -66,13 +57,13 @@
 
           this.currentName = nextChild ? nextChild.key : prevChild ? prevChild.key : '-1';
         }
-        this.onRemove(tab.key);
+        this.$emit('tab-remove', tab.key);
       },
       handleTabClick(tab, event) {
         this.currentName = tab.key;
-        this.onClick(tab.key, event);
+        this.$emit('tab-click', tab.key, event);
       },
-      calcBarStyle() {
+      calcBarStyle(firstRendering) {
         if (this.type || !this.$refs.tabs) return {};
         var style = {};
         var offset = 0;
@@ -92,16 +83,19 @@
         style.width = tabWidth + 'px';
         style.transform = `translateX(${offset}px)`;
 
+        if (!firstRendering) {
+          style.transition = 'transform .3s cubic-bezier(.645,.045,.355,1), -webkit-transform .3s cubic-bezier(.645,.045,.355,1)';
+        }
         this.barStyle = style;
       }
     },
-
     mounted() {
       if (!this.currentName) {
-        this.currentName = this.$children[0].key;
+        var fisrtKey = this.$children[0] && this.$children[0].key || '1';
+        this.currentName = this.activeName || fisrtKey;
       }
       this.$children.forEach(tab => this.tabs.push(tab));
-      this.$nextTick(() => this.calcBarStyle());
+      this.$nextTick(() => this.calcBarStyle(true));
     }
   };
 </script>

packages/theme-default/src/tabs.css

@@ -19,7 +19,7 @@
       height: 3px;
       background-color: var(--color-primary);
       z-index: 1;
-      transition: transform .3s cubic-bezier(.645,.045,.355,1);
+      /*transition: transform .3s cubic-bezier(.645,.045,.355,1);*/
       list-style: none;
     }
     @e item {