diff --git a/components/notice-bar/demo/cases/demo8.vue b/components/notice-bar/demo/cases/demo8.vue new file mode 100644 index 000000000..af454de02 --- /dev/null +++ b/components/notice-bar/demo/cases/demo8.vue @@ -0,0 +1,39 @@ + + + diff --git a/components/notice-bar/demo/index.vue b/components/notice-bar/demo/index.vue index d80227e7d..c0864b649 100644 --- a/components/notice-bar/demo/index.vue +++ b/components/notice-bar/demo/index.vue @@ -19,6 +19,7 @@ import Demo4 from './cases/demo4' import Demo5 from './cases/demo5' import Demo6 from './cases/demo6' import Demo7 from './cases/demo7' +import Demo8 from './cases/demo8' -export default {...createDemoModule('notice-bar', [Demo0, Demo1, Demo2, Demo3, Demo4, Demo5, Demo6, Demo7])} +export default {...createDemoModule('notice-bar', [Demo0, Demo1, Demo2, Demo3, Demo4, Demo5, Demo6, Demo7, Demo8])} diff --git a/components/notice-bar/index.vue b/components/notice-bar/index.vue index fea8f5259..dd20af3bd 100644 --- a/components/notice-bar/index.vue +++ b/components/notice-bar/index.vue @@ -147,7 +147,18 @@ export default { if (!wrap || !content) { return } - this.overflow = content.scrollWidth > wrap.clientWidth + /** + * 计算 padding-left 对宽度的影响 + * 替换 clientWidth 为 getBoundingClientRect + */ + const paddingLeft = + window + .getComputedStyle(content, null) + .getPropertyValue('padding') + .split(' ')[3] || '0px' + const left = +paddingLeft.match(/\d+/g)[0] + + this.overflow = content.scrollWidth - left > Math.ceil(wrap.getBoundingClientRect().width) }, }, } diff --git a/components/tabs/tab-pane.vue b/components/tabs/tab-pane.vue index d317483d2..eceba5330 100644 --- a/components/tabs/tab-pane.vue +++ b/components/tabs/tab-pane.vue @@ -67,6 +67,7 @@ .md-tab-pane position relative width 100% + transform translateZ(0) .md-tab-slide-left, .md-tab-slide-right