Skip to content

Commit

Permalink
fix(runtime-dom): fix nested v-show priority regression
Browse files Browse the repository at this point in the history
close #10338
  • Loading branch information
yyx990803 committed Feb 26, 2024
1 parent 6c74fb0 commit 364f890
Show file tree
Hide file tree
Showing 2 changed files with 16 additions and 12 deletions.
11 changes: 5 additions & 6 deletions packages/runtime-dom/src/directives/vShow.ts
Original file line number Diff line number Diff line change
@@ -1,10 +1,12 @@
import type { ObjectDirective } from '@vue/runtime-core'

export const vShowOriginalDisplay = Symbol('_vod')
export const vShowHidden = Symbol('_vsh')

interface VShowElement extends HTMLElement {
export interface VShowElement extends HTMLElement {
// _vod = vue original display
[vShowOriginalDisplay]: string
[vShowHidden]: boolean
}

export const vShow: ObjectDirective<VShowElement> & { name?: 'show' } = {
Expand All @@ -23,11 +25,7 @@ export const vShow: ObjectDirective<VShowElement> & { name?: 'show' } = {
}
},
updated(el, { value, oldValue }, { transition }) {
if (
!value === !oldValue &&
(el.style.display === el[vShowOriginalDisplay] || !value)
)
return
if (!value === !oldValue) return
if (transition) {
if (value) {
transition.beforeEnter(el)
Expand All @@ -53,6 +51,7 @@ if (__DEV__) {

function setDisplay(el: VShowElement, value: unknown): void {
el.style.display = value ? el[vShowOriginalDisplay] : 'none'
el[vShowHidden] = !value
}

// SSR vnode transforms, only used when user includes client-oriented render
Expand Down
17 changes: 11 additions & 6 deletions packages/runtime-dom/src/modules/style.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,10 @@
import { capitalize, hyphenate, isArray, isString } from '@vue/shared'
import { camelize, warn } from '@vue/runtime-core'
import { vShowOriginalDisplay } from '../directives/vShow'
import {
type VShowElement,
vShowHidden,
vShowOriginalDisplay,
} from '../directives/vShow'
import { CSS_VAR_TEXT } from '../helpers/useCssVars'

type Style = string | Record<string, string | string[]> | null
Expand All @@ -10,7 +14,6 @@ const displayRE = /(^|;)\s*display\s*:/
export function patchStyle(el: Element, prev: Style, next: Style) {
const style = (el as HTMLElement).style
const isCssString = isString(next)
const currentDisplay = style.display
let hasControlledDisplay = false
if (next && !isCssString) {
if (prev) {
Expand Down Expand Up @@ -50,12 +53,14 @@ export function patchStyle(el: Element, prev: Style, next: Style) {
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`.
// indicates the element also has `v-show`.
if (vShowOriginalDisplay in el) {
// make v-show respect the current v-bind style display when shown
el[vShowOriginalDisplay] = hasControlledDisplay ? style.display : ''
style.display = currentDisplay
// if v-show is in hidden state, v-show has higher priority
if ((el as VShowElement)[vShowHidden]) {
style.display = 'none'
}
}
}

Expand Down

0 comments on commit 364f890

Please sign in to comment.