theluyuan/vue3-yuanma
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source 
fix #1759
This commit is contained in:
Evan You 2020-08-03 17:13:17 -04:00
parent f6afe7000e
commit 0cd98c3040
2 changed files with 36 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
packages/runtime-dom/__tests__/patchStyle.spec.ts
View File

@ -74,6 +74,7 @@ describe(`runtime-dom: style patching`, () => {
const store: any = {} const store: any = {}
return { return {
style: { style: {
display: '',
WebkitTransition: '', WebkitTransition: '',
setProperty(key: string, val: string) { setProperty(key: string, val: string) {
store[key] = val store[key] = val
@ -96,4 +97,15 @@ describe(`runtime-dom: style patching`, () => {
patchProp(el as any, 'style', {}, { transition: 'all 1s' }) patchProp(el as any, 'style', {}, { transition: 'all 1s' })
expect(el.style.WebkitTransition).toBe('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')
})
}) })

16
packages/runtime-dom/src/modules/style.ts
View File

@ -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' 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) { export function patchStyle(el: Element, prev: Style, next: Style) {
const style = (el as HTMLElement).style const style = (el as HTMLElement).style
@ -13,7 +13,7 @@ export function patchStyle(el: Element, prev: Style, next: Style) {
} }
} else { } else {
for (const key in next) { for (const key in next) {
setStyle(style, key, next[key] as string) setStyle(style, key, next[key])
} }
if (prev && !isString(prev)) { if (prev && !isString(prev)) {
for (const key in prev) { for (const key in prev) {
@ -27,7 +27,14 @@ export function patchStyle(el: Element, prev: Style, next: Style) {
const importantRE = /\s*!important$/ const importantRE = /\s*!important$/
function setStyle(style: CSSStyleDeclaration, name: string, val: string) { function setStyle(
style: CSSStyleDeclaration,
name: string,
val: string | string[]
) {
if (isArray(val)) {
val.forEach(v => setStyle(style, name, v))
} else {
if (name.startsWith('--')) { if (name.startsWith('--')) {
// custom property definition // custom property definition
style.setProperty(name, val) style.setProperty(name, val)
@ -45,6 +52,7 @@ function setStyle(style: CSSStyleDeclaration, name: string, val: string) {
} }
} }
} }
}
const prefixes = ['Webkit', 'Moz', 'ms'] const prefixes = ['Webkit', 'Moz', 'ms']
const prefixCache: Record<string, string> = {} const prefixCache: Record<string, string> = {}