[Improvement] Tab: add change event (#1503)

youzan · Jul 19, 2018 · b7b2ad9 · b7b2ad9
1 parent 9da3e0c
commit b7b2ad9
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 5 deletions.
diff --git a/packages/tab/en-US.md b/packages/tab/en-US.md
@@ -165,4 +165,5 @@ In swipeable mode, you can switch tabs with swipe gestrue in the content
 | Event | Description | Arguments |
 |-----------|-----------|-----------|
 | click | Triggered when click tab | index：index of current tab，title: tab title |
+| change | Triggered when active tab changed | index：index of current tab，title: tab title |
 | disabled | Triggered when click disabled tab | index：index of current tab, title: tab title |
diff --git a/packages/tab/zh-CN.md b/packages/tab/zh-CN.md
@@ -167,5 +167,5 @@ export default {
 | 事件名 | 说明 | 参数 |
 |-----------|-----------|-----------|
 | click | 点击标签时触发 | index：标签索引，title：标题 |
+| change | 当前激活的标签改变时触发 | index：标签索引，title：标题 |
 | disabled | 点击被禁用的标签时触发 | index：标签索引，title：标题 |
-
diff --git a/packages/tabs/index.vue b/packages/tabs/index.vue
@@ -71,7 +71,7 @@ export default create({
     return {
       tabs: [],
       position: 'content-top',
-      curActive: 0,
+      curActive: null,
       lineStyle: {},
       events: {
         resize: false,
@@ -236,8 +236,14 @@ export default create({
     },
 
     setCurActive(active) {
-      this.curActive = active;
-      this.$emit('input', active);
+      if (active !== this.curActive) {
+        this.$emit('input', active);
+
+        if (this.curActive !== null) {
+          this.$emit('change', active, this.tabs[active].title);
+        }
+        this.curActive = active;
+      }
     },
 
     // emit event when clicked
@@ -246,8 +252,8 @@ export default create({
       if (disabled) {
         this.$emit('disabled', index, title);
       } else {
-        this.$emit('click', index, title);
         this.setCurActive(index);
+        this.$emit('click', index, title);
       }
     },