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

Tab: fix tabs-item's padding cause active-bar's width and transform err( … #15355) (#16520) 

* Tab: Refactor tabs-item's padding with dynamic value
pull/16867/head
咸fish 2019-08-01 20:19:51 +08:00 committed by Geass
parent 6105a75595
commit 27d4e0ac66
1 changed files with 5 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
packages/tabs/src/tab-bar.vue
View File

@ -32,16 +32,17 @@
return true; return true;
} else { } else {
tabSize = $el[`client${firstUpperCase(sizeName)}`]; tabSize = $el[`client${firstUpperCase(sizeName)}`];
const tabStyles = window.getComputedStyle($el);
if (sizeName === 'width' && this.tabs.length > 1) { if (sizeName === 'width' && this.tabs.length > 1) {
tabSize -= (index === 0 || index === this.tabs.length - 1) ? 20 : 40; tabSize -= parseFloat(tabStyles.paddingLeft) + parseFloat(tabStyles.paddingRight);
}
if (sizeName === 'width') {
offset += parseFloat(tabStyles.paddingLeft);
} }
return false; return false;
} }
}); });
if (sizeName === 'width' && offset !== 0) {
offset += 20;
}
const transform = `translate${firstUpperCase(sizeDir)}(${offset}px)`; const transform = `translate${firstUpperCase(sizeDir)}(${offset}px)`;
style[sizeName] = tabSize + 'px'; style[sizeName] = tabSize + 'px';
style.transform = transform; style.transform = transform;