github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity

fix: tabs nav button disabled class

pull/19882/head
MartinsYong 2020-07-19 10:51:21 +08:00
parent bf534d977e
commit 9dba0ab001
2 changed files with 48 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
packages/tabs/src/tab-nav.vue
View File

@ -35,6 +35,10 @@
data() {
return {
scrollable: false,
scrollState: {
prev: 0,
next: false
},
navOffset: 0,
isFocus: false,
focusable: true
@ -121,9 +125,9 @@
if (containerSize < navSize) {
const currentOffset = this.navOffset;
this.scrollable = this.scrollable || {};
this.scrollable.prev = currentOffset;
this.scrollable.next = currentOffset + containerSize < navSize;
this.scrollable = true;
this.scrollState.prev = currentOffset;
this.scrollState.next = currentOffset + containerSize < navSize;
if (navSize - currentOffset < containerSize) {
this.navOffset = navSize - containerSize;
}
@ -203,6 +207,7 @@
onTabRemove,
navStyle,
scrollable,
scrollState,
scrollNext,
scrollPrev,
changeTab,
@ -211,8 +216,8 @@
} = this;
const scrollBtn = scrollable
? [
<span class={['el-tabs__nav-prev', scrollable.prev ? '' : 'is-disabled']} on-click={scrollPrev}><i class="el-icon-arrow-left"></i></span>,
<span class={['el-tabs__nav-next', scrollable.next ? '' : 'is-disabled']} on-click={scrollNext}><i class="el-icon-arrow-right"></i></span>
<span class={['el-tabs__nav-prev', scrollState.prev ? '' : 'is-disabled']} on-click={scrollPrev}><i class="el-icon-arrow-left"></i></span>,
<span class={['el-tabs__nav-next', scrollState.next ? '' : 'is-disabled']} on-click={scrollNext}><i class="el-icon-arrow-right"></i></span>
] : null;
const tabs = this._l(panes, (pane, index) => {

38
test/unit/specs/tabs.spec.js
View File

@ -499,6 +499,44 @@ describe('Tabs', () => {
});
}, 100);
});
it('nav btn disabled', done => {
vm = createVue({
template: `
<el-tabs ref="tabs" style="width: 200px;">
<el-tab-pane label="用户管理">A</el-tab-pane>
<el-tab-pane label="配置管理">B</el-tab-pane>
<el-tab-pane label="用户管理">A</el-tab-pane>
<el-tab-pane label="配置管理">B</el-tab-pane>
<el-tab-pane label="用户管理">A</el-tab-pane>
<el-tab-pane label="配置管理">B</el-tab-pane>
<el-tab-pane label="定时任务补偿">D</el-tab-pane>
</el-tabs>
`
}, true);
setTimeout(_ => {
const btnPrev = vm.$el.querySelector('.el-tabs__nav-prev');
btnPrev.click();
vm.$nextTick(_ => {
const tabNav = vm.$el.querySelector('.el-tabs__nav-wrap');
expect(tabNav.__vue__.scrollState.prev).to.be.equal(0);
expect(btnPrev.classList.contains('is-disabled')).to.be.true;
expect(tabNav.__vue__.scrollState.next).to.be.true;
const btnNext = vm.$el.querySelector('.el-tabs__nav-next');
const clickNext = () => {
if (tabNav.__vue__.scrollState.next) {
btnNext.click();
setTimeout(_ => { clickNext(); }, 500); // wait for transition end
} else {
expect(btnNext.classList.contains('is-disabled')).to.be.true;
done();
}
};
clickNext();
});
}, 100);
});
it('should work with lazy', done => {
vm = createVue({
template: `