fix(runtime-dom): style binding multi value support

fix #1759
vuejs · Aug 3, 2020 · 0cd98c3 · 0cd98c3
1 parent f6afe70
commit 0cd98c3
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 16 deletions.
diff --git a/packages/runtime-dom/__tests__/patchStyle.spec.ts b/packages/runtime-dom/__tests__/patchStyle.spec.ts
@@ -74,6 +74,7 @@ describe(`runtime-dom: style patching`, () => {
     const store: any = {}
     return {
       style: {
+        display: '',
         WebkitTransition: '',
         setProperty(key: string, val: string) {
           store[key] = val
@@ -96,4 +97,15 @@ describe(`runtime-dom: style patching`, () => {
     patchProp(el as any, 'style', {}, { transition: 'all 1s' })
     expect(el.style.WebkitTransition).toBe('all 1s')
   })
+
+  it('multiple values', () => {
+    const el = mockElementWithStyle()
+    patchProp(
+      el as any,
+      'style',
+      {},
+      { display: ['-webkit-box', '-ms-flexbox', 'flex'] }
+    )
+    expect(el.style.display).toBe('flex')
+  })
 })
diff --git a/packages/runtime-dom/src/modules/style.ts b/packages/runtime-dom/src/modules/style.ts
@@ -1,7 +1,7 @@
-import { isString, hyphenate, capitalize } from '@vue/shared'
+import { isString, hyphenate, capitalize, isArray } from '@vue/shared'
 import { camelize } from '@vue/runtime-core'
 
-type Style = string | Partial<CSSStyleDeclaration> | null
+type Style = string | Record<string, string | string[]> | null
 
 export function patchStyle(el: Element, prev: Style, next: Style) {
   const style = (el as HTMLElement).style
@@ -13,7 +13,7 @@ export function patchStyle(el: Element, prev: Style, next: Style) {
     }
   } else {
     for (const key in next) {
-      setStyle(style, key, next[key] as string)
+      setStyle(style, key, next[key])
     }
     if (prev && !isString(prev)) {
       for (const key in prev) {
@@ -27,21 +27,29 @@ export function patchStyle(el: Element, prev: Style, next: Style) {
 
 const importantRE = /\s*!important$/
 
-function setStyle(style: CSSStyleDeclaration, name: string, val: string) {
-  if (name.startsWith('--')) {
-    // custom property definition
-    style.setProperty(name, val)
+function setStyle(
+  style: CSSStyleDeclaration,
+  name: string,
+  val: string | string[]
+) {
+  if (isArray(val)) {
+    val.forEach(v => setStyle(style, name, v))
   } else {
-    const prefixed = autoPrefix(style, name)
-    if (importantRE.test(val)) {
-      // !important
-      style.setProperty(
-        hyphenate(prefixed),
-        val.replace(importantRE, ''),
-        'important'
-      )
+    if (name.startsWith('--')) {
+      // custom property definition
+      style.setProperty(name, val)
     } else {
-      style[prefixed as any] = val
+      const prefixed = autoPrefix(style, name)
+      if (importantRE.test(val)) {
+        // !important
+        style.setProperty(
+          hyphenate(prefixed),
+          val.replace(importantRE, ''),
+          'important'
+        )
+      } else {
+        style[prefixed as any] = val
+      }
     }
   }
 }