fix(runtime-dom): handle multiple patch with falsy style value

This commit is contained in:
linzhe 2024-11-12 23:11:03 +08:00
parent ed01d92571
commit 58464f2364
2 changed files with 28 additions and 2 deletions

View File

@ -79,6 +79,32 @@ describe(`runtime-dom: style patching`, () => {
expect(el.style.width).toBe('0px')
})
it('multiple patch with falsy style value', () => {
const el = document.createElement('div')
const styleA = {
left: 0,
right: false,
top: 0,
bottom: false,
}
patchProp(el as any, 'style', null, styleA)
expect(el.style.left).toBe('0px')
expect(el.style.right).toBe('')
expect(el.style.top).toBe('0px')
expect(el.style.bottom).toBe('')
const styleB = {
left: false,
right: 0,
top: false,
bottom: 0,
}
patchProp(el as any, 'style', styleA, styleB)
expect(el.style.left).toBe('')
expect(el.style.right).toBe('0px')
expect(el.style.top).toBe('')
expect(el.style.bottom).toBe('0px')
})
it('should remove style attribute on falsy value', () => {
const el = document.createElement('div')
el.style.cssText = 'color: red;'

View File

@ -19,14 +19,14 @@ export function patchStyle(el: Element, prev: Style, next: Style): void {
if (prev) {
if (!isString(prev)) {
for (const key in prev) {
if (next[key] == null) {
if (!next[key]) {
setStyle(style, key, '')
}
}
} else {
for (const prevStyle of prev.split(';')) {
const key = prevStyle.slice(0, prevStyle.indexOf(':')).trim()
if (next[key] == null) {
if (!next[key]) {
setStyle(style, key, '')
}
}