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

fix(runtime-dom): fix behavior regression for v-show + style display binding

Browse Source 
fix #4768
This commit is contained in:
Evan You 2021-10-09 19:31:52 -04:00
parent 3ca83179d1
commit 3f38d599f5
2 changed files with 25 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -68,6 +68,14 @@ describe(`runtime-dom: style patching`, () => {
expect(el.style.width).toBe('0px') expect(el.style.width).toBe('0px')
}) })
it('should remove style attribute on falsy value', () => {
const el = document.createElement('div')
el.style.cssText = 'color: red;'
patchProp(el as any, 'style', {}, null)
expect(el.hasAttribute('style')).toBe(false)
expect(el.style.cssText).toBe('')
})
// JSDOM doesn't support custom properties on style object so we have to // JSDOM doesn't support custom properties on style object so we have to
// mock it here. // mock it here.
function mockElementWithStyle() { function mockElementWithStyle() {

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

@ -5,14 +5,8 @@ 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
const currentDisplay = style.display const isCssString = isString(next)
if (!next) { if (next && !isCssString) {
el.removeAttribute('style')
} else if (isString(next)) {
if (prev !== next) {
style.cssText = next
}
} else {
for (const key in next) { for (const key in next) {
setStyle(style, key, next[key]) setStyle(style, key, next[key])
} }
@ -23,12 +17,21 @@ export function patchStyle(el: Element, prev: Style, next: Style) {
} }
} }
} }
} } else {
// indicates that the `display` of the element is controlled by `v-show`, const currentDisplay = style.display
// so we always keep the current `display` value regardless of the `style` value, if (isCssString) {
// thus handing over control to `v-show`. if (prev !== next) {
if ('_vod' in el) { style.cssText = next as string
style.display = currentDisplay }
} else if (prev) {
el.removeAttribute('style')
}
// indicates that the `display` of the element is controlled by `v-show`,
// so we always keep the current `display` value regardless of the `style`
// value, thus handing over control to `v-show`.
if ('_vod' in el) {
style.display = currentDisplay
}
} }
} }