fix(runtime-dom): v-bind style should clear previous css string value (#10373)

close #10352

diff --git a/packages/runtime-dom/__tests__/patchStyle.spec.ts b/packages/runtime-dom/__tests__/patchStyle.spec.ts
index e7cd0984a19bcbf8939cb18a28441b00752dea65..8b2765e2149170cd702fbce7957fbd43bbd6ff6d 100644 (file)
--- a/packages/runtime-dom/__tests__/patchStyle.spec.ts
+++ b/packages/runtime-dom/__tests__/patchStyle.spec.ts
@@ -158,4 +158,13 @@ describe(`runtime-dom: style patching`, () => {
     )
     expect(el.style.display).toBe('flex')
   })
+
+  it('should clear previous css string value', () => {
+    const el = document.createElement('div')
+    patchProp(el, 'style', {}, 'color:red')
+    expect(el.style.cssText.replace(/\s/g, '')).toBe('color:red;')
+
+    patchProp(el, 'style', 'color:red', { fontSize: '12px' })
+    expect(el.style.cssText.replace(/\s/g, '')).toBe('font-size:12px;')
+  })
 })

diff --git a/packages/runtime-dom/src/modules/style.ts b/packages/runtime-dom/src/modules/style.ts
index 9f897a6b2b00e12c2006c0054fd95b532d3cb657..11f7ce1c027b9da0bcfbaa4f9df770e8b88918fd 100644 (file)
--- a/packages/runtime-dom/src/modules/style.ts
+++ b/packages/runtime-dom/src/modules/style.ts
@@ -13,10 +13,19 @@ export function patchStyle(el: Element, prev: Style, next: Style) {
   const currentDisplay = style.display
   let hasControlledDisplay = false
   if (next && !isCssString) {
-    if (prev && !isString(prev)) {
-      for (const key in prev) {
-        if (next[key] == null) {
-          setStyle(style, key, '')
+    if (prev) {
+      if (!isString(prev)) {
+        for (const key in prev) {
+          if (next[key] == null) {
+            setStyle(style, key, '')
+          }
+        }
+      } else {
+        for (const prevStyle of prev.split(';')) {
+          const key = prevStyle.slice(0, prevStyle.indexOf(':')).trim()
+          if (next[key] == null) {
+            setStyle(style, key, '')
+          }
         }
       }
     }