root
/
vue3-core
mirror of https://github.com/vuejs/core.git
1
0
Fork 0
Code Issues Actions 4 Packages Projects Releases Wiki Activity

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

close #10352
This commit is contained in:
zhoulixiang 2024-02-25 20:53:00 +08:00 committed by GitHub
parent 76c9c742e9
commit e2d323538e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 22 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -158,4 +158,13 @@ describe(`runtime-dom: style patching`, () => {
) )
expect(el.style.display).toBe('flex') 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;')
})
}) })

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

@ -13,10 +13,19 @@ export function patchStyle(el: Element, prev: Style, next: Style) {
const currentDisplay = style.display const currentDisplay = style.display
let hasControlledDisplay = false let hasControlledDisplay = false
if (next && !isCssString) { if (next && !isCssString) {
if (prev && !isString(prev)) { if (prev) {
for (const key in prev) { if (!isString(prev)) {
if (next[key] == null) { for (const key in prev) {
setStyle(style, key, '') 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, '')
}
} }
} }
} }