From 988d54e93af8286915069818024749ea3847ebd9 Mon Sep 17 00:00:00 2001 From: GaoNeng-wWw Date: Sat, 7 Sep 2024 10:20:45 +0800 Subject: [PATCH] fix(dialog-box): destoryOnClose transition --- packages/renderless/src/dialog-box/index.ts | 22 ++++-- packages/renderless/src/dialog-box/vue.ts | 5 +- packages/renderless/types/dialog-box.type.ts | 1 + packages/theme/src/dialog-box/index.less | 41 ++++++---- packages/vue/src/dialog-box/src/pc.vue | 82 ++++++++++---------- 5 files changed, 86 insertions(+), 65 deletions(-) diff --git a/packages/renderless/src/dialog-box/index.ts b/packages/renderless/src/dialog-box/index.ts index 4fe5e090fc..b85683a0f6 100644 --- a/packages/renderless/src/dialog-box/index.ts +++ b/packages/renderless/src/dialog-box/index.ts @@ -88,6 +88,7 @@ export const watchVisible = if (val) { state.closed = false emit('open') + state.render = true /* istanbul ignore next */ on(el, 'scroll', api.updatePopper) @@ -107,9 +108,9 @@ export const watchVisible = emit('close') } - if (props.destroyOnClose) { - nextTick(() => state.key++) - } + // if (props.destroyOnClose) { + // nextTick(() => state.key++) + // } if (props.rightSlide) { const dialogBoxDom = el.querySelector(constants.DIALOG_BOX_CLASS) || el @@ -245,9 +246,18 @@ export const afterEnter = (emit: IDialogBoxRenderlessParams['emit']) => (): void emit('opened') } -export const afterLeave = (emit: IDialogBoxRenderlessParams['emit']) => (): void => { - emit('closed') -} +export const afterLeave = + ( + emit: IDialogBoxRenderlessParams['emit'], + state: IDialogBoxRenderlessParams['state'], + props: IDialogBoxRenderlessParams['props'] + ) => + (): void => { + emit('closed') + if (props.destroyOnClose) { + state.render = false + } + } const findPopoverComponent = ({ vm, diff --git a/packages/renderless/src/dialog-box/vue.ts b/packages/renderless/src/dialog-box/vue.ts index 12d1e5242c..e75c938dd2 100644 --- a/packages/renderless/src/dialog-box/vue.ts +++ b/packages/renderless/src/dialog-box/vue.ts @@ -82,7 +82,8 @@ const initState = ({ style: computed(() => api.computedStyle()), animationName: computed(() => api.computedAnimationName()), current, - dragStyle: null + dragStyle: null, + render: props.destroyOnClose }) return state @@ -144,7 +145,7 @@ const initApi = ({ unMounted: unMounted({ api, parent, props }), computedAnimationName: computedAnimationName({ constants, props }), afterEnter: afterEnter(emit), - afterLeave: afterLeave(emit), + afterLeave: afterLeave(emit, state, props), hideScrollbar: hideScrollbar(lockScrollClass), showScrollbar: showScrollbar(lockScrollClass), handleDrag: handleDrag({ parent, props, state, emit, vm }), diff --git a/packages/renderless/types/dialog-box.type.ts b/packages/renderless/types/dialog-box.type.ts index 97e4721301..b04b21d9a7 100644 --- a/packages/renderless/types/dialog-box.type.ts +++ b/packages/renderless/types/dialog-box.type.ts @@ -61,6 +61,7 @@ export interface IDialogBoxState { rendered?: boolean mouseUpWrapperFlag: boolean mouseDownWrapperFlag: boolean + render: boolean } export interface IDialogBoxApi { diff --git a/packages/theme/src/dialog-box/index.less b/packages/theme/src/dialog-box/index.less index 5f7aac483c..5a1cdf85bf 100644 --- a/packages/theme/src/dialog-box/index.less +++ b/packages/theme/src/dialog-box/index.less @@ -45,9 +45,17 @@ height: 100vh; display: flex; flex-direction: column; + + .@{dialog-box-prefix-cls}__content { + width: 100vw; + height: 100vh; + display: flex; + flex-direction: column; + } } &.is-center { + .@{dialog-box-prefix-cls}__header, .@{dialog-box-prefix-cls}__footer { text-align: center; @@ -60,8 +68,7 @@ } & &__header { - padding: var(--ti-dialog-box-head-padding-top) var(--ti-dialog-box-head-padding-horizontal) - var(--ti-dialog-box-head-padding-bottom); + padding: var(--ti-dialog-box-head-padding-top) var(--ti-dialog-box-head-padding-horizontal) var(--ti-dialog-box-head-padding-bottom); background: var(--ti-dialog-box-bg-color); font-weight: var(--ti-dialog-box-head-title-font-weight); display: flex; @@ -75,10 +82,12 @@ .@{dialog-box-prefix-cls}__title { flex: 1; } + .@{dialog-box-prefix-cls}__btn-tools { display: flex; justify-content: space-between; } + .@{dialog-box-prefix-cls}__headerbtn { position: relative; border: none; @@ -94,7 +103,7 @@ border-radius: var(--ti-dialog-box-btn-border-radius); } - & + .@{dialog-box-prefix-cls}__headerbtn { + &+.@{dialog-box-prefix-cls}__headerbtn { margin-left: 8px; } @@ -135,7 +144,7 @@ overflow: hidden; } - > span { + >span { max-height: 120px; overflow-y: auto; } @@ -146,8 +155,7 @@ } & &__footer { - padding: var(--ti-dialog-box-footer-padding-top) var(--ti-dialog-box-footer-padding-horizontal) - var(--ti-dialog-box-footer-margin-bottom); + padding: var(--ti-dialog-box-footer-padding-top) var(--ti-dialog-box-footer-padding-horizontal) var(--ti-dialog-box-footer-margin-bottom); text-align: var(--ti-dialog-box-footer-align); box-sizing: border-box; @@ -180,28 +188,22 @@ } .@{dialog-box-prefix-cls}__header { - padding: var(--ti-dialog-box-drawer-header-padding-top) var(--ti-dialog-box-drawer-header-padding-right) - var(--ti-dialog-box-drawer-header-padding-bottom) var(--ti-dialog-box-drawer-header-padding-left); + padding: var(--ti-dialog-box-drawer-header-padding-top) var(--ti-dialog-box-drawer-header-padding-right) var(--ti-dialog-box-drawer-header-padding-bottom) var(--ti-dialog-box-drawer-header-padding-left); border-bottom: 1px solid var(--ti-dialog-box-drawer-divider-border-color); &btn { - right: calc( - var(--ti-dialog-box-btn-position-right) - var(--ti-dialog-box-drawer-padding-right) - - (var(--ti-dialog-box-btn-width) - var(--ti-dialog-box-close-icon-size)) / 2 - ); + right: calc(var(--ti-dialog-box-btn-position-right) - var(--ti-dialog-box-drawer-padding-right) - (var(--ti-dialog-box-btn-width) - var(--ti-dialog-box-close-icon-size)) / 2); } } .@{dialog-box-prefix-cls}__body { flex: 1; overflow: auto; - padding: var(--ti-dialog-box-drawer-body-padding-top) var(--ti-dialog-box-drawer-body-padding-right) - var(--ti-dialog-box-drawer-body-padding-bottom) var(--ti-dialog-box-drawer-body-padding-left); + padding: var(--ti-dialog-box-drawer-body-padding-top) var(--ti-dialog-box-drawer-body-padding-right) var(--ti-dialog-box-drawer-body-padding-bottom) var(--ti-dialog-box-drawer-body-padding-left); } .@{dialog-box-prefix-cls}__footer { - padding: var(--ti-dialog-box-drawer-footer-padding-top) var(--ti-dialog-box-drawer-footer-padding-right) - var(--ti-dialog-box-drawer-footer-padding-bottom) var(--ti-dialog-box-drawer-footer-padding-left); + padding: var(--ti-dialog-box-drawer-footer-padding-top) var(--ti-dialog-box-drawer-footer-padding-right) var(--ti-dialog-box-drawer-footer-padding-bottom) var(--ti-dialog-box-drawer-footer-padding-left); border-top: 1px solid var(--ti-dialog-box-drawer-divider-border-color); text-align: var(--ti-dialog-box-drawer-footer-text-align); } @@ -290,6 +292,11 @@ .dialog-fade-leave-active { animation: dialog-fade-out 0.3s; + + .tiny-dialog-box, + .tiny-dialog-box__content { + animation: dialog-fade-out 0.3s; + } } @keyframes dialog-fade-in { @@ -340,4 +347,4 @@ top: 0 !important; left: 0 !important; } -} +} \ No newline at end of file diff --git a/packages/vue/src/dialog-box/src/pc.vue b/packages/vue/src/dialog-box/src/pc.vue index 7342374993..735892460d 100644 --- a/packages/vue/src/dialog-box/src/pc.vue +++ b/packages/vue/src/dialog-box/src/pc.vue @@ -17,12 +17,12 @@ @click.self="handleWrapperClick" @mouseup="useMouseEventUp" @mousedown="useMouseEventDown" + key="1" > - +
-
- - {{ title }} - -
- - - +
+
+ + {{ title }} + +
+ + + +
+
+
+ +
+
+
-
-
- -
-
-