8000 fix: the value of display is sometimes incorrect with v-show by zh-lx · Pull Request #10297 · vuejs/core · GitHub
[go: up one dir, main page]
Skip to content

fix: the value of display is sometimes incorrect with v-show #10297

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Feb 9, 2024
Merged

fix: the value of display is sometimes incorrect with v-show #10297

Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
8b47699
fix: the value of display is sometimes incorrect with v-show
zh-lx Feb 8, 2024
4d35bb7
fix: the value of display is sometimes incorrect with v-show
zh-lx Feb 8, 2024
60f83b4
fix: merge master
zh-lx Feb 9, 2024
dcbc501
refactor: simplify implementation
yyx990803 Feb 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
refactor: simplify implementation
  • Loading branch information
@yyx990803
yyx990803 committed Feb 9, 2024
commit dcbc5013d306ca8c9d1cf0b8d9ca36fcd6a74805
22 changes: 9 additions & 13 deletions packages/runtime-dom/src/modules/style.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,13 @@ import { CSS_VAR_TEXT } from '../helpers/useCssVars'

type Style = string | Record<string, string | string[]> | null

const displayRE = /(^|;)\s*display\s*:/

export function patchStyle(el: Element, prev: Style, next: Style) {
const style = (el as HTMLElement).style
const currentDisplay = style.display
const isCssString = isString(next)
const currentDisplay = style.display
let hasControlledDisplay = false
if (next && !isCssString) {
if (prev && !isString(prev)) {
for (const key in prev) {
Expand All @@ -18,6 +21,9 @@ export function patchStyle(el: Element, prev: Style, next: Style) {
}
}
for (const key in next) {
if (key === 'display') {
hasControlledDisplay = true
}
setStyle(style, key, next[key])
}
} else {
Expand All @@ -29,6 +35,7 @@ export function patchStyle(el: Element, prev: Style, next: Style) {
;(next as string) += ';' + cssVarText
}
style.cssText = next as string
hasControlledDisplay = displayRE.test(next)
}
} else if (prev) {
el.removeAttribute('style')
Expand All @@ -38,18 +45,7 @@ export function patchStyle(el: Element, prev: Style, next: Style) {
// so we always keep the current `display` value regardless of the `style`
// value, thus handing over control to `v-show`.
if (vShowOldKey in el) {
el[vShowOldKey] = ''
if (next) {
if (
(!isCssString && next.display != null) ||
(isCssString &&
next
.split(';')
.some(item => item.split(':')[0]?.trim() === 'display'))
) {
el[vShowOldKey] = style.display
}
}
el[vShowOldKey] = hasControlledDisplay ? style.display : ''
style.display = currentDisplay
}
}
Expand Down
0