diff --git a/packages/tab/en-US.md b/packages/tab/en-US.md index 45d0abb9d..eb8cf20be 100644 --- 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 index 9a8b4b19d..3c4ed2590 100644 --- 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 index 6cbea44db..d571adc92 100644 --- 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); } },