mirror of https://github.com/vuejs/core.git
refactor: use more descriptive name for v-show original display key
This commit is contained in:
parent
c6defc8df1
commit
9a365fe00d
|
@ -26,7 +26,7 @@ import {
|
|||
} from '@vue/runtime-dom'
|
||||
import { type SSRContext, renderToString } from '@vue/server-renderer'
|
||||
import { PatchFlags } from '@vue/shared'
|
||||
import { vShowOldKey } from '../../runtime-dom/src/directives/vShow'
|
||||
import { vShowOriginalDisplay } from '../../runtime-dom/src/directives/vShow'
|
||||
|
||||
function mountWithHydration(html: string, render: () => any) {
|
||||
const container = document.createElement('div')
|
||||
|
@ -1252,7 +1252,7 @@ describe('SSR hydration', () => {
|
|||
foo
|
||||
</div>
|
||||
`)
|
||||
expect((container.firstChild as any)[vShowOldKey]).toBe('')
|
||||
expect((container.firstChild as any)[vShowOriginalDisplay]).toBe('')
|
||||
expect(vnode.el).toBe(container.firstChild)
|
||||
expect(`mismatch`).not.toHaveBeenWarned()
|
||||
})
|
||||
|
|
|
@ -1,15 +1,16 @@
|
|||
import type { ObjectDirective } from '@vue/runtime-core'
|
||||
|
||||
export const vShowOldKey = Symbol('_vod')
|
||||
export const vShowOriginalDisplay = Symbol('_vod')
|
||||
|
||||
interface VShowElement extends HTMLElement {
|
||||
// _vod = vue original display
|
||||
[vShowOldKey]: string
|
||||
[vShowOriginalDisplay]: string
|
||||
}
|
||||
|
||||
export const vShow: ObjectDirective<VShowElement> & { name?: 'show' } = {
|
||||
beforeMount(el, { value }, { transition }) {
|
||||
el[vShowOldKey] = el.style.display === 'none' ? '' : el.style.display
|
||||
el[vShowOriginalDisplay] =
|
||||
el.style.display === 'none' ? '' : el.style.display
|
||||
if (transition && value) {
|
||||
transition.beforeEnter(el)
|
||||
} else {
|
||||
|
@ -24,7 +25,7 @@ export const vShow: ObjectDirective<VShowElement> & { name?: 'show' } = {
|
|||
updated(el, { value, oldValue }, { transition }) {
|
||||
if (
|
||||
!value === !oldValue &&
|
||||
(el.style.display === el[vShowOldKey] || !value)
|
||||
(el.style.display === el[vShowOriginalDisplay] || !value)
|
||||
)
|
||||
return
|
||||
if (transition) {
|
||||
|
@ -51,7 +52,7 @@ if (__DEV__) {
|
|||
}
|
||||
|
||||
function setDisplay(el: VShowElement, value: unknown): void {
|
||||
el.style.display = value ? el[vShowOldKey] : 'none'
|
||||
el.style.display = value ? el[vShowOriginalDisplay] : 'none'
|
||||
}
|
||||
|
||||
// SSR vnode transforms, only used when user includes client-oriented render
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
import { capitalize, hyphenate, isArray, isString } from '@vue/shared'
|
||||
import { camelize, warn } from '@vue/runtime-core'
|
||||
import { vShowOldKey } from '../directives/vShow'
|
||||
import { vShowOriginalDisplay } from '../directives/vShow'
|
||||
import { CSS_VAR_TEXT } from '../helpers/useCssVars'
|
||||
|
||||
type Style = string | Record<string, string | string[]> | null
|
||||
|
@ -53,8 +53,8 @@ export function patchStyle(el: Element, prev: Style, next: 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 (vShowOldKey in el) {
|
||||
el[vShowOldKey] = hasControlledDisplay ? style.display : ''
|
||||
if (vShowOriginalDisplay in el) {
|
||||
el[vShowOriginalDisplay] = hasControlledDisplay ? style.display : ''
|
||||
style.display = currentDisplay
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue