update

src/views/_common/_element/ImageElement/index.vue

@@ -9,7 +9,7 @@
       height: elementInfo.height + 'px',
       transform: `rotate(${elementInfo.rotate}deg)`,
     }"
-    @mousedown="handleSelectElement($event)" 
+    @mousedown="$event => handleSelectElement($event)" 
   >
     <ImageClip
       v-if="isCliping"
@@ -94,7 +94,7 @@
           :key="point.direction"
           :type="point.direction"
           :style="point.style"
-          @mousedown.stop="scaleElement($event, elementInfo, point.direction)"
+          @mousedown.stop="$event => scaleElement($event, elementInfo, point.direction)"
         />
         <RotateHandler
           class="operate-rotate-handler" 
@@ -294,14 +294,6 @@ export default defineComponent({
 .editable-element-image {
   position: absolute;
 
-  &.lock .operate-border-line {
-    border-color: #888;
-  }
-
-  &:hover .operate-border-line {
-    display: block;
-  }
-
   &.lock .element-content {
     cursor: default;
   }

src/views/_common/_element/TextElement/index.vue

@@ -8,7 +8,7 @@
       width: elementInfo.width + 'px',
       transform: `rotate(${elementInfo.rotate}deg)`,
     }"
-    @mousedown="handleSelectElement($event, false)" 
+    @mousedown="$event => handleSelectElement($event)"
   >
     <div class="element-content"
       :style="{
@@ -26,6 +26,7 @@
       <div class="text"
         v-html="elementInfo.content" 
         :contenteditable="isActive && !elementInfo.lock"
+        @mousedown="$event => handleSelectElement($event, false)"
       ></div>
     </div>
 
@@ -37,7 +38,6 @@
         'active': isActive,
       }" 
       :style="{ transform: `scale(${1 / canvasScale})` }"
-      v-contextmenu="contextmenus"
     >
       <BorderLine 
         class="operate-border-line"
@@ -45,8 +45,6 @@
         :key="line.type" 
         :type="line.type" 
         :style="line.style"
-        :isWide="true"
-        @mousedown="handleSelectElement($event)"
       />
       <template v-if="!elementInfo.lock && (isActiveGroupElement || !isMultiSelect)">
         <ResizeHandler
@@ -55,7 +53,7 @@
           :key="point.direction"
           :type="point.direction"
           :style="point.style"
-          @mousedown.stop="scaleElement($event, elementInfo, point.direction)"
+          @mousedown.stop="$event => scaleElement($event, elementInfo, point.direction)"
         />
         <RotateHandler
           class="operate-rotate-handler" 
@@ -168,14 +166,7 @@ export default defineComponent({
 <style lang="scss" scoped>
 .editable-element-text {
   position: absolute;
-
-  &.lock .operate-border-line {
-    border-color: #888;
-  }
-
-  &:hover .operate-border-line {
-    display: block;
-  }
+  cursor: move;
 
   &.lock .element-content {
     cursor: default;

src/views/_common/_element/hooks/useElementShadow.ts

@@ -5,7 +5,7 @@ export default (shadow: Ref<PPTElementShadow | undefined>) => {
   let shadowStyle = ''
   if(shadow.value) {
     const { h, v, blur, color } = shadow.value
-    shadowStyle = `${h} ${v} ${blur} ${color}`
+    shadowStyle = `${h}px ${v}px ${blur}px ${color}`
   }
 
   return {