diff --git a/examples/docs/en-US/tabs.md b/examples/docs/en-US/tabs.md index 89d2aa84..7df2ef9c 100644 --- a/examples/docs/en-US/tabs.md +++ b/examples/docs/en-US/tabs.md @@ -143,4 +143,5 @@ Border card tabs. |---------- |-------- |---------- |------------- |-------- | | label | title of the tab | string | — | — | | label-content | render function for tab title | Function(h) | - | - | +| disabled | whether Tab is disabled | boolean | - | false | | name | identifier corresponding to the activeName of Tabs, representing the alias of the tab-pane | string | — | ordinal number of the tab-pane in the sequence, i.e. the first tab-pane is '1' | diff --git a/examples/docs/zh-CN/tabs.md b/examples/docs/zh-CN/tabs.md index ec569c0d..caab5af3 100644 --- a/examples/docs/zh-CN/tabs.md +++ b/examples/docs/zh-CN/tabs.md @@ -138,4 +138,5 @@ |---------- |-------- |---------- |------------- |-------- | | label | 选项卡标题 | string | — | — | | label-content | 选项卡的标题的渲染 Function | Function(h) | - | - | +| disabled | 是否禁用 | boolean | - | false | | name | 与选项卡 activeName 对应的标识符,表示选项卡别名 | string | — | 该选项卡在选项卡列表中的顺序值,如第一个选项卡则为'1' | diff --git a/packages/tabs/src/tab-pane.vue b/packages/tabs/src/tab-pane.vue index 23e4cd42..46eca056 100644 --- a/packages/tabs/src/tab-pane.vue +++ b/packages/tabs/src/tab-pane.vue @@ -6,7 +6,8 @@ label: String, labelContent: Function, name: String, - closable: Boolean + closable: Boolean, + disabled: Boolean }, data() { diff --git a/packages/tabs/src/tabs.vue b/packages/tabs/src/tabs.vue index c9cf3cf4..62feae59 100644 --- a/packages/tabs/src/tabs.vue +++ b/packages/tabs/src/tabs.vue @@ -39,12 +39,21 @@ let nextChild = tabs[index]; let prevChild = tabs[index - 1]; - this.currentName = nextChild ? nextChild.index : prevChild ? prevChild.index : '-1'; + while (prevChild && prevChild.disabled) { + prevChild = tabs[tabs.indexOf(prevChild) - 1]; + } + + this.currentName = nextChild + ? nextChild.index + : prevChild + ? prevChild.index + : '-1'; } this.$emit('tab-remove', tab); this.$forceUpdate(); }, handleTabClick(tab, event) { + if (tab.disabled) return; this.currentName = tab.index; this.$emit('tab-click', tab, event); }, diff --git a/packages/theme-default/src/tabs.css b/packages/theme-default/src/tabs.css index 61dd2e61..f338f415 100644 --- a/packages/theme-default/src/tabs.css +++ b/packages/theme-default/src/tabs.css @@ -59,6 +59,11 @@ color: #1f2d3d; cursor: pointer; } + + @when disabled { + color: var(--disabled-color-base); + cursor: default; + } } @e content { overflow: hidden; diff --git a/test/unit/specs/tabs.spec.js b/test/unit/specs/tabs.spec.js index d5e51619..6795c7cb 100644 --- a/test/unit/specs/tabs.spec.js +++ b/test/unit/specs/tabs.spec.js @@ -241,4 +241,26 @@ describe('Tabs', () => { done(); }); }); + it('disabled', done => { + vm = createVue({ + template: ` + + A + B + C + D + + ` + }, true); + + vm.$nextTick(_ => { + let tabList = vm.$el.querySelector('.el-tabs__header').children; + + tabList[1].click(); + vm.$nextTick(_ => { + expect(tabList[1].classList.contains('is-active')).to.not.true; + done(); + }); + }); + }); });