diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9deb57a32..9d57ac323 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -23,6 +23,7 @@
#### 非兼容性更新
+- Tabs 组件的 click 和 remove 事件回调参数从 name 改为事件对应的 tab 组件实例
- 全屏 Loading 现在默认不再锁定屏幕滚动。如果需要的话，可添加 `lock` 修饰符
- Table 删除属性 fixedColumnCount, customCriteria, customBackgroundColors
- Table 的 selectionchange、cellmouseenter、cellmouseleave、cellclick 事件更名为 selection-change、cell-mouse-enter、cell-mouse-leave、cell-click。
diff --git a/examples/docs/zh-cn/tabs.md b/examples/docs/zh-cn/tabs.md
index 07df20160..f4df08f6c 100644
--- a/examples/docs/zh-cn/tabs.md
+++ b/examples/docs/zh-cn/tabs.md
@@ -131,8 +131,8 @@
### Tabs Events
| 事件名称 | 说明 | 回调参数 |
|---------- |-------- |---------- |
-| tab-click | tab 被选中的钩子 | 被选中的标签 tab |
-| tab-remove | tab 被删除的钩子 | 被删除的标签 tab |
+| tab-click | tab 被选中的钩子 | 被选中的标签 tab 实例 |
+| tab-remove | tab 被删除的钩子 | 被删除的标签 tab 实例 |
### Tab-pane Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
diff --git a/packages/tabs/src/tabs.vue b/packages/tabs/src/tabs.vue
index 74ef7190d..fdfc0068a 100644
--- a/packages/tabs/src/tabs.vue
+++ b/packages/tabs/src/tabs.vue
@@ -55,11 +55,11 @@
this.currentName = nextChild ? nextChild.key : prevChild ? prevChild.key : '-1';
}
- this.$emit('tab-remove', tab.key);
+ this.$emit('tab-remove', tab);
},
handleTabClick(tab, event) {
this.currentName = tab.key;
- this.$emit('tab-click', tab.key, event);
+ this.$emit('tab-click', tab, event);
},
calcBarStyle(firstRendering) {
if (this.type || !this.$refs.tabs) return {};
diff --git a/test/unit/specs/tabs.spec.js b/test/unit/specs/tabs.spec.js
new file mode 100644
index 000000000..7562e22b0
--- /dev/null
+++ b/test/unit/specs/tabs.spec.js
@@ -0,0 +1,164 @@
+import { createVue } from '../util';
+
+describe('Tabs', () => {
+ it('create', done => {
+ const vm = createVue({
+ template: `
+
+ A
+ B
+ C
+ D
+
+ `
+ }, true);
+ let tabList = vm.$el.querySelector('.el-tabs__header').children;
+ let paneList = vm.$el.querySelector('.el-tabs__content').children;
+ setTimeout(_ => {
+ expect(tabList[0].classList.contains('is-active')).to.be.true;
+ expect(paneList[0].style.display).to.not.ok;
+
+ tabList[2].click();
+ vm.$nextTick(_ => {
+ expect(tabList[2].classList.contains('is-active')).to.be.true;
+ expect(paneList[2].style.display).to.not.ok;
+ done();
+ });
+ }, 100);
+ });
+ it('active-name', done => {
+ const vm = createVue({
+ template: `
+
+ A
+ B
+ C
+ D
+
+ `,
+ data() {
+ return {
+ activeName: 'tab-B'
+ };
+ },
+ methods: {
+ handleClick(tab) {
+ this.activeName = tab.name;
+ }
+ }
+ }, true);
+ let tabList = vm.$el.querySelector('.el-tabs__header').children;
+ let paneList = vm.$el.querySelector('.el-tabs__content').children;
+ setTimeout(_ => {
+ expect(tabList[1].classList.contains('is-active')).to.be.true;
+ expect(paneList[1].style.display).to.not.ok;
+
+ tabList[3].click();
+ vm.$nextTick(_ => {
+ expect(tabList[3].classList.contains('is-active')).to.be.true;
+ expect(paneList[3].style.display).to.not.ok;
+ expect(vm.activeName === 'tab-D');
+ done();
+ });
+ }, 100);
+ });
+ it('card', () => {
+ const vm = createVue({
+ template: `
+
+ A
+ B
+ C
+ D
+
+ `
+ }, true);
+
+ expect(vm.$el.classList.contains('el-tabs--card')).to.be.true;
+ });
+ it('border card', () => {
+ const vm = createVue({
+ template: `
+
+ A
+ B
+ C
+ D
+
+ `
+ }, true);
+
+ expect(vm.$el.classList.contains('el-tabs--border-card')).to.be.true;
+ });
+ it('closable', done => {
+ const vm = createVue({
+ template: `
+
+ A
+ B
+ C
+ D
+
+ `,
+ data() {
+ return {
+ removeTabName: ''
+ };
+ },
+ methods: {
+ handleRemove(tab) {
+ this.removeTabName = tab.label;
+ }
+ }
+ }, true);
+
+ let tabList = vm.$el.querySelector('.el-tabs__header').children;
+ let paneList = vm.$el.querySelector('.el-tabs__content').children;
+ setTimeout(_ => {
+ tabList[1].querySelector('.el-icon-close').click();
+ vm.$nextTick(_ => {
+ expect(tabList.length).to.be.equal(3);
+ expect(paneList.length).to.be.equal(3);
+ expect(vm.removeTabName).to.be.equal('配置管理');
+ expect(tabList[1].innerText.trim()).to.be.equal('角色管理');
+ expect(paneList[0].innerText.trim()).to.be.equal('A');
+ done();
+ });
+ }, 100);
+ });
+ it('closable edge', done => {
+ const vm = createVue({
+ template: `
+
+ A
+ B
+ C
+ D
+
+ `
+ }, true);
+
+ let tabList = vm.$el.querySelector('.el-tabs__header').children;
+ let paneList = vm.$el.querySelector('.el-tabs__content').children;
+ setTimeout(_ => {
+ tabList[0].querySelector('.el-icon-close').click();
+ vm.$nextTick(_ => {
+ expect(tabList.length).to.be.equal(3);
+ expect(paneList.length).to.be.equal(3);
+ expect(tabList[0].innerText.trim()).to.be.equal('配置管理');
+ expect(paneList[0].innerText.trim()).to.be.equal('B');
+
+ tabList[2].click();
+ tabList[2].querySelector('.el-icon-close').click();
+ vm.$nextTick(_ => {
+ expect(tabList.length).to.be.equal(2);
+ expect(paneList.length).to.be.equal(2);
+ expect(tabList[1].classList.contains('is-active')).to.be.true;
+ expect(tabList[1].innerText.trim()).to.be.equal('角色管理');
+ expect(paneList[1].innerText.trim()).to.be.equal('C');
+ done();
+ });
+ });
+ }, 100);
+ });
+});