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 @@
+
+
+
+
+ {{ content }}
+
+
+
+
+
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