From 7623eac174a575b9777a2fe0e2ff635fdceccfb3 Mon Sep 17 00:00:00 2001 From: zhaozhongyu Date: Sat, 9 Oct 2021 19:40:25 +0800 Subject: [PATCH 1/2] fix(runtime-dom): fix conflicts between v-show and style display binding --- packages/runtime-dom/src/directives/vShow.ts | 6 ++++-- packages/runtime-dom/src/modules/style.ts | 9 +++++++-- 2 files changed, 11 insertions(+), 4 deletions(-) diff --git a/packages/runtime-dom/src/directives/vShow.ts b/packages/runtime-dom/src/directives/vShow.ts index ee2aff0b856..6049da72e0e 100644 --- a/packages/runtime-dom/src/directives/vShow.ts +++ b/packages/runtime-dom/src/directives/vShow.ts @@ -1,8 +1,10 @@ import { ObjectDirective } from '@vue/runtime-core' -interface VShowElement extends HTMLElement { +export interface VShowElement extends HTMLElement { // _vod = vue original display _vod: string + // _vod = vue display status + _vds: boolean } export const vShow: ObjectDirective = { @@ -41,7 +43,7 @@ export const vShow: ObjectDirective = { } function setDisplay(el: VShowElement, value: unknown): void { - el.style.display = value ? el._vod : 'none' + el.style.display = (el._vds = !!value) ? el._vod : 'none' } // SSR vnode transforms, only used when user includes client-oriented render diff --git a/packages/runtime-dom/src/modules/style.ts b/packages/runtime-dom/src/modules/style.ts index 69a608795d9..ccfdfff95d5 100644 --- a/packages/runtime-dom/src/modules/style.ts +++ b/packages/runtime-dom/src/modules/style.ts @@ -1,5 +1,6 @@ import { isString, hyphenate, capitalize, isArray } from '@vue/shared' import { camelize } from '@vue/runtime-core' +import { VShowElement } from '../directives/vShow' type Style = string | Record | null @@ -27,8 +28,12 @@ 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 ('_vod' in el) { - style.display = currentDisplay + if ('_vod' in el && currentDisplay !== style.display) { + (el as VShowElement)._vod = style.display; + if (!(el as VShowElement)._vds) { + // if vshow was set to hide + style.display = currentDisplay; + } } } From 7ce5e92df41edaf8ae623ea821a070da53eb2e67 Mon Sep 17 00:00:00 2001 From: zhaozhongyu Date: Sat, 9 Oct 2021 21:10:44 +0800 Subject: [PATCH 2/2] Update packages/runtime-dom/src/directives/vShow.ts Co-authored-by: edison --- packages/runtime-dom/src/directives/vShow.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/runtime-dom/src/directives/vShow.ts b/packages/runtime-dom/src/directives/vShow.ts index 6049da72e0e..1d31d5ca961 100644 --- a/packages/runtime-dom/src/directives/vShow.ts +++ b/packages/runtime-dom/src/directives/vShow.ts @@ -3,7 +3,7 @@ import { ObjectDirective } from '@vue/runtime-core' export interface VShowElement extends HTMLElement { // _vod = vue original display _vod: string - // _vod = vue display status + // _vds = vue display status _vds: boolean }