临时更新

src/App.vue

@@ -51,5 +51,6 @@ export default defineComponent({
   right: 0;
   background-color: #fff;
   padding: 10px;
+  z-index: -1;
 }
 </style>

src/utils/emitter.ts

@@ -3,6 +3,7 @@ import mitt, { Emitter } from 'mitt'
 export enum EmitterEvents {
   UPDATE_TEXT_STATE = 'UPDATE_TEXT_STATE',
   EXEC_TEXT_COMMAND = 'EXEC_TEXT_COMMAND',
+  SCALE_ELEMENT_STATE = 'SCALE_ELEMENT_STATE',
 }
 
 const emitter: Emitter = mitt()

src/views/Editor/Canvas/hooks/useScaleElement.ts

@@ -3,6 +3,7 @@ import { useStore } from 'vuex'
 import { State, MutationTypes } from '@/store'
 import { ElementTypes, PPTElement, PPTImageElement, PPTLineElement, PPTShapeElement } from '@/types/slides'
 import { OperateResizeHandlers, AlignmentLineProps, MultiSelectRange } from '@/types/edit'
+import emitter, { EmitterEvents } from '@/utils/emitter'
 import { VIEWPORT_SIZE, VIEWPORT_ASPECT_RATIO } from '@/configs/canvas'
 import { MIN_SIZE } from '@/configs/element'
 import { AlignLine, uniqAlignLines } from '@/utils/element'
@@ -97,6 +98,7 @@ export default (
 
   const scaleElement = (e: MouseEvent, element: Exclude<PPTElement, PPTLineElement>, command: OperateResizeHandlers) => {
     let isMouseDown = true
+    emitter.emit(EmitterEvents.SCALE_ELEMENT_STATE, true)
 
     const elOriginLeft = element.left
     const elOriginTop = element.top
@@ -376,6 +378,7 @@ export default (
 
     document.onmouseup = e => {
       isMouseDown = false
+      emitter.emit(EmitterEvents.SCALE_ELEMENT_STATE, false)
       document.onmousemove = null
       document.onmouseup = null
       alignmentLines.value = []

src/views/components/element/TextElement/index.vue

@@ -84,19 +84,25 @@ export default defineComponent({
 
     const elementRef = ref<HTMLElement | null>(null)
 
-    const debounceUpdateTextElementHeight = debounce(function(realHeight) {
-      store.commit(MutationTypes.UPDATE_ELEMENT, {
-        id: props.elementInfo.id,
-        props: { height: realHeight },
-      })
-    }, 300, { trailing: true })
+    const isScaling = ref(false)
 
-    const updateTextElementHeight = () => {
+    emitter.on(EmitterEvents.SCALE_ELEMENT_STATE, state => {
+      isScaling.value = state
+    })
+
+    const updateTextElementHeight = (entries: ResizeObserverEntry[]) => {
+      const contentRect = entries[0].contentRect
       if(!elementRef.value) return
 
-      const realHeight = elementRef.value.clientHeight
-      if(props.elementInfo.height !== realHeight) {
-        debounceUpdateTextElementHeight(realHeight)
+      const realHeight = contentRect.height
+
+      if(!isScaling.value) {
+        if(props.elementInfo.height !== realHeight) {
+          store.commit(MutationTypes.UPDATE_ELEMENT, {
+            id: props.elementInfo.id,
+            props: { height: realHeight },
+          })
+        }
       }
     }
     const resizeObserver = new ResizeObserver(updateTextElementHeight)