From 62e7888fcfcac2e1e4610e7edb59ba329e5b9c93 Mon Sep 17 00:00:00 2001 From: roymondchen Date: Wed, 13 Mar 2024 19:59:45 +0800 Subject: [PATCH] =?UTF-8?q?fix(editor):=20=E4=BF=AE=E5=A4=8D=E7=9B=B4?= =?UTF-8?q?=E6=8E=A5=E5=85=B3=E9=97=AD=E4=BB=A3=E7=A0=81=E5=9D=97=E7=BC=96?= =?UTF-8?q?=E8=BE=91=E7=AA=97=E5=8F=A3=E5=91=8A=E8=AD=A6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../editor/src/components/CodeBlockEditor.vue | 41 ++++++++++++------- 1 file changed, 26 insertions(+), 15 deletions(-) diff --git a/packages/editor/src/components/CodeBlockEditor.vue b/packages/editor/src/components/CodeBlockEditor.vue index 59869f78..63747114 100644 --- a/packages/editor/src/components/CodeBlockEditor.vue +++ b/packages/editor/src/components/CodeBlockEditor.vue @@ -9,7 +9,7 @@ @@ -58,7 +58,7 @@ import { computed, inject, nextTick, onBeforeUnmount, ref } from 'vue'; import { TMagicButton, TMagicDialog, tMagicMessage, tMagicMessageBox, TMagicTag } from '@tmagic/design'; -import { ColumnConfig, FormConfig, FormState, MFormBox, MFormDrawer } from '@tmagic/form'; +import { ColumnConfig, FormConfig, FormState, MFormBox } from '@tmagic/form'; import type { CodeBlockContent } from '@tmagic/schema'; import FloatingBox from '@editor/components/FloatingBox.vue'; @@ -87,24 +87,24 @@ const services = inject('services'); const difVisible = ref(false); const height = ref(globalThis.innerHeight); -const windowReizehandler = () => { +const windowResizeHandler = () => { height.value = globalThis.innerHeight; }; -globalThis.addEventListener('resize', windowReizehandler); +globalThis.addEventListener('resize', windowResizeHandler); onBeforeUnmount(() => { - globalThis.removeEventListener('resize', windowReizehandler); + globalThis.removeEventListener('resize', windowResizeHandler); }); const magicVsEditor = ref>(); const diffChange = () => { - if (!magicVsEditor.value || !fomDrawer.value?.form) { + if (!magicVsEditor.value || !formBox.value?.form) { return; } - fomDrawer.value.form.values.content = magicVsEditor.value.getEditorValue(); + formBox.value.form.values.content = magicVsEditor.value.getEditorValue(); difVisible.value = false; }; @@ -216,6 +216,7 @@ const functionConfig = computed(() => [ ]); const submitForm = (values: CodeBlockContent) => { + changedValue.value = undefined; emit('submit', values); }; @@ -223,12 +224,12 @@ const errorHandler = (error: any) => { tMagicMessage.error(error.message); }; -const fomDrawer = ref>(); +const formBox = ref>(); const openHandler = () => { setTimeout(() => { - if (fomDrawer.value) { - const height = fomDrawer.value?.bodyHeight - 348 - (props.isDataSource ? 50 : 0); + if (formBox.value) { + const height = formBox.value?.bodyHeight - 348 - (props.isDataSource ? 50 : 0); codeEditorHeight.value = `${height > 100 ? height : 600}px`; } }); @@ -241,6 +242,7 @@ const changeHandler = (values: CodeBlockContent) => { const beforeClose = (done: (cancel?: boolean) => void) => { if (!changedValue.value) { + editVisible.value = false; done(); return; } @@ -253,9 +255,13 @@ const beforeClose = (done: (cancel?: boolean) => void) => { }) .then(() => { changedValue.value && submitForm(changedValue.value); + editVisible.value = false; done(); }) .catch((action: string) => { + if (action === 'cancel') { + editVisible.value = false; + } done(action === 'cancel'); }); }; @@ -281,14 +287,19 @@ defineExpose({ async show() { if (props.slideType !== 'box') { boxVisible.value = true; + await nextTick(); } - await nextTick(); + editVisible.value = true; - fomDrawer.value?.show(); }, - hide() { - fomDrawer.value?.hide(); + async hide() { + editVisible.value = false; + + if (props.slideType !== 'box') { + await nextTick(); + boxVisible.value = false; + } }, });