JLNTV_IPD/tmagic-editor
4
0
Fork 0
mirror of https://github.com/Tencent/tmagic-editor.git synced 2025-04-26 19:46:42 +08:00
Code Issues Projects Releases Wiki Activity

fix(editor): 修复点击floatbox时更新zindex导致宽高被重置的问题

Browse Source
This commit is contained in:
moonszhang 2024-03-12 19:54:34 +08:00 committed by roymondchen
parent 5fc649607a
commit cae928f7f9
2 changed files with 26 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
packages/editor/src/components/FloatingBox.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<Teleport to="body" v-if="visible"> <Teleport to="body" v-if="visible">
<div ref="target" class="m-editor-float-box" :style="style" @mousedown="nextZIndex"> <div ref="target" class="m-editor-float-box" :style="{ ...style, zIndex: curZIndex }" @mousedown="nextZIndex">
<div ref="dragTarget" class="m-editor-float-box-title"> <div ref="dragTarget" class="m-editor-float-box-title">
<slot name="title"> <slot name="title">
<span>{{ title }}</span> <span>{{ title }}</span>
@ -17,7 +17,7 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue'; import { computed, nextTick, onBeforeUnmount, ref, watch, watchEffect } from 'vue';
import { Close } from '@element-plus/icons-vue'; import { Close } from '@element-plus/icons-vue';
import VanillaMoveable from 'moveable'; import VanillaMoveable from 'moveable';
@ -33,21 +33,12 @@ interface Rect {
height: number | string; height: number | string;
} }
const props = withDefaults( const props = withDefaults(defineProps<{ visible: boolean; position?: Position; rect?: Rect; title?: string }>(), {
defineProps<{ visible: false,
visible: boolean; title: '',
position?: Position; position: () => ({ left: 0, top: 0 }),
rect?: Rect; rect: () => ({ width: 'auto', height: 'auto' }),
title?: string; });
beforeClose?: (done: (cancel?: boolean) => void) => void;
}>(),
{
visible: false,
title: '',
position: () => ({ left: 0, top: 0 }),
rect: () => ({ width: 'auto', height: 'auto' }),
},
);
const emit = defineEmits<{ const emit = defineEmits<{
'update:visible': [boolean]; 'update:visible': [boolean];
@ -59,12 +50,23 @@ const dragTarget = ref<HTMLDivElement>();
const zIndex = useZIndex(); const zIndex = useZIndex();
const curZIndex = ref<number>(zIndex.nextZIndex()); const curZIndex = ref<number>(zIndex.nextZIndex());
const rect = ref({
width: props.rect.width,
height: props.rect.height,
});
watchEffect(() => {
rect.value = {
width: props.rect.width,
height: props.rect.height,
};
});
const style = computed(() => ({ const style = computed(() => ({
left: `${props.position.left}px`, left: `${props.position.left}px`,
top: `${props.position.top}px`, top: `${props.position.top}px`,
width: typeof props.rect.width === 'string' ? props.rect.width : `${props.rect.width}px`, width: typeof rect.value.width === 'string' ? rect.value.width : `${rect.value.width}px`,
height: typeof props.rect.height === 'string' ? props.rect.height : `${props.rect.height}px`, height: typeof rect.value.height === 'string' ? rect.value.height : `${rect.value.height}px`,
zIndex: curZIndex.value,
})); }));
let moveable: VanillaMoveable | null = null; let moveable: VanillaMoveable | null = null;
@ -91,6 +93,8 @@ const initMoveable = () => {
}); });
moveable.on('resize', (e) => { moveable.on('resize', (e) => {
rect.value.width = e.width;
rect.value.height = e.height;
e.target.style.width = `${e.width}px`; e.target.style.width = `${e.width}px`;
e.target.style.height = `${e.height}px`; e.target.style.height = `${e.height}px`;
e.target.style.transform = e.drag.transform; e.target.style.transform = e.drag.transform;
@ -121,18 +125,8 @@ onBeforeUnmount(() => {
destroyMoveable(); destroyMoveable();
}); });
const hide = (cancel?: boolean) => {
if (cancel !== false) {
emit('update:visible', false);
}
};
const closeHandler = () => { const closeHandler = () => {
if (typeof props.beforeClose === 'function') { emit('update:visible', false);
props.beforeClose(hide);
} else {
hide();
}
}; };
const nextZIndex = () => { const nextZIndex = () => {

2
packages/form/src/theme/form-box.scss
View File

@ -2,7 +2,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 16px; padding: 16px;
max-width: 90%; box-sizing: border-box;
.el-box__header { .el-box__header {
margin: 0; margin: 0;
} }