JLNTV_IPD/tmagic-editor
4
0
Fork 0
mirror of https://github.com/Tencent/tmagic-editor.git synced 2025-06-28 13:25:17 +08:00
Code Issues Projects Releases Wiki Activity

feat(editor): 新增props-panel-unmounted事件

Browse Source
This commit is contained in:
roymondchen 2025-06-26 21:06:21 +08:00
parent 8d6da3712e
commit 9e590c5cf7
3 changed files with 17 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
packages/editor/src/Editor.vue
View File

@ -97,6 +97,7 @@
:extend-state="extendFormState" :extend-state="extendFormState"
:disabled-show-src="disabledShowSrc" :disabled-show-src="disabledShowSrc"
@mounted="propsPanelMountedHandler" @mounted="propsPanelMountedHandler"
@unmounted="propsPanelUnmountedHandler"
@form-error="propsPanelFormErrorHandler" @form-error="propsPanelFormErrorHandler"
@submit-error="propsPanelSubmitErrorHandler" @submit-error="propsPanelSubmitErrorHandler"
> >
@ -163,6 +164,7 @@ defineOptions({
const emit = defineEmits<{ const emit = defineEmits<{
'props-panel-mounted': [instance: InstanceType<typeof FormPanel>]; 'props-panel-mounted': [instance: InstanceType<typeof FormPanel>];
'props-panel-unmounted': [];
'update:modelValue': [value: MApp | null]; 'update:modelValue': [value: MApp | null];
'props-form-error': [e: any]; 'props-form-error': [e: any];
'props-submit-error': [e: any]; 'props-submit-error': [e: any];
@ -235,6 +237,9 @@ provide<EventBus>('eventBus', new EventEmitter());
const propsPanelMountedHandler = (e: InstanceType<typeof FormPanel>) => { const propsPanelMountedHandler = (e: InstanceType<typeof FormPanel>) => {
emit('props-panel-mounted', e); emit('props-panel-mounted', e);
}; };
const propsPanelUnmountedHandler = () => {
emit('props-panel-unmounted');
};
const propsPanelSubmitErrorHandler = (e: any) => { const propsPanelSubmitErrorHandler = (e: any) => {
emit('props-submit-error', e); emit('props-submit-error', e);

7
packages/editor/src/layouts/props-panel/FormPanel.vue
View File

@ -42,7 +42,7 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { computed, getCurrentInstance, inject, onMounted, ref, useTemplateRef, watchEffect } from 'vue'; import { computed, getCurrentInstance, inject, onMounted, onUnmounted, ref, useTemplateRef, watchEffect } from 'vue';
import { Document as DocumentIcon } from '@element-plus/icons-vue'; import { Document as DocumentIcon } from '@element-plus/icons-vue';
import { TMagicButton, TMagicScrollbar } from '@tmagic/design'; import { TMagicButton, TMagicScrollbar } from '@tmagic/design';
@ -78,6 +78,7 @@ const emit = defineEmits<{
'submit-error': [e: any]; 'submit-error': [e: any];
'form-error': [e: any]; 'form-error': [e: any];
mounted: [internalInstance: any]; mounted: [internalInstance: any];
unmounted: [];
}>(); }>();
const services = useServices(); const services = useServices();
@ -104,6 +105,10 @@ onMounted(() => {
emit('mounted', internalInstance?.proxy); emit('mounted', internalInstance?.proxy);
}); });
onUnmounted(() => {
emit('unmounted');
});
const submit = async (v: FormValue, eventData: ContainerChangeEventData) => { const submit = async (v: FormValue, eventData: ContainerChangeEventData) => {
try { try {
const values = await configFormRef.value?.submitForm(); const values = await configFormRef.value?.submitForm();

6
packages/editor/src/layouts/props-panel/PropsPanel.vue
View File

@ -13,6 +13,7 @@
@submit-error="errorHandler" @submit-error="errorHandler"
@form-error="errorHandler" @form-error="errorHandler"
@mounted="mountedHandler" @mounted="mountedHandler"
@unmounted="unmountedHandler"
></FormPanel> ></FormPanel>
<Resizer v-if="showStylePanel" @change="widthChange"></Resizer> <Resizer v-if="showStylePanel" @change="widthChange"></Resizer>
@ -89,6 +90,7 @@ const emit = defineEmits<{
'submit-error': [e: any]; 'submit-error': [e: any];
'form-error': [e: any]; 'form-error': [e: any];
mounted: [internalInstance: InstanceType<typeof FormPanel>]; mounted: [internalInstance: InstanceType<typeof FormPanel>];
unmounted: [];
}>(); }>();
const { editorService, uiService, propsService, storageService } = useServices(); const { editorService, uiService, propsService, storageService } = useServices();
@ -165,6 +167,10 @@ const mountedHandler = () => {
} }
}; };
const unmountedHandler = () => {
emit('unmounted');
};
const propsPanelEl = useTemplateRef('propsPanel'); const propsPanelEl = useTemplateRef('propsPanel');
const propsPanelWidth = ref( const propsPanelWidth = ref(
storageService.getItem(PROPS_PANEL_WIDTH_STORAGE_KEY, { protocol: Protocol.NUMBER }) || 300, storageService.getItem(PROPS_PANEL_WIDTH_STORAGE_KEY, { protocol: Protocol.NUMBER }) || 300,