Bläddra i källkod

fix(Editor): 当画布中存在frame元素时隐藏部分工具栏

添加isFrame计算属性用于检测当前画布中是否存在frame元素,并在存在时隐藏文本、图片和形状工具栏,以避免与frame元素的交互冲突
lsc 1 månad sedan
förälder
incheckning
4e847c30a5
1 ändrade filer med 8 tillägg och 3 borttagningar
  1. 8 3
      src/views/Editor/CanvasTool/index2.vue

+ 8 - 3
src/views/Editor/CanvasTool/index2.vue

@@ -2,7 +2,7 @@
   <div class="canvas-tool">
     <div class="left-handler">
       <Popover trigger="click" v-model:value="textTypeSelectVisible"
-        style="height: 100%;display: flex;align-items: center;" :offset="10">
+        style="height: 100%;display: flex;align-items: center;" :offset="10" v-if="!isFrame">
         <template #content>
           <PopoverMenuItem center @click="() => { drawText(); textTypeSelectVisible = false }">
             <IconTextRotationNone /> {{ lang.ssTextHorizontal }}
@@ -17,7 +17,7 @@
         </div>
       </Popover>
       <Popover trigger="click" style="height: 100%;display: flex;align-items: center;"
-        v-model:value="picturePoolVisible" :offset="10">
+        v-model:value="picturePoolVisible" :offset="10" v-if="!isFrame">
         <template #content>
           <FileInput @change="files => insertImageElement(files)">
             <div class="popover-item">
@@ -56,7 +56,7 @@
           </FileInput> -->
       </Popover>
       <Popover trigger="click" style="height: 100%;display: flex;align-items: center;" v-model:value="shapePoolVisible"
-        :offset="10">
+        :offset="10" v-if="!isFrame">
         <template #content>
           <ShapePool @select="shape => drawShape(shape)" />
         </template>
@@ -128,6 +128,11 @@ const hasInteractiveTool = computed(() => {
   return elements.some((el: any) => el.type === 'frame' && (el.toolType === 45 || el.toolType === 15))
 })
 
+const isFrame = computed(() => {
+  const elements = currentSlide.value?.elements || []
+  return elements.some((el: any) => el.type === 'frame')
+})
+
 const editTool = () => {
   const elements = currentSlide.value?.elements || []
   const frameElement = elements.find((el: any) => el.type === 'frame' && (el.toolType === 45 || el.toolType === 15))