fix: 选区调整和炫酷的操作互不影响终极版

src/components/martixCraft/Edit/index.vue

@@ -167,6 +167,20 @@ const onSwiperInitialized = (swiper: any) => {
 const tabChangeHandle = () => {
   swiperInstance?.slideTo(activeTab.value)
 }
+
+const touchstartHandle = () => {
+  swiperInstance.allowTouchMove = false
+}
+
+const touchmoveHandle = () => {
+  swiperInstance.allowTouchMove = false
+  setTimeout(() => {
+    swiperInstance.allowTouchMove = true
+  }, 100)
+}
+const touchendHandle = () => {
+  swiperInstance.allowTouchMove = true
+}
 </script>
 
 <template>
@@ -206,7 +220,7 @@ const tabChangeHandle = () => {
       >
         <SwiperSlide v-for="(item, index) in form.times" :key="index">
           <div class="tab-content">
-            <TrayGraph ref="sprayRefs" :key="index" :container="`spray-${index + 1}`" select />
+            <TrayGraph ref="sprayRefs" :key="index" :container="`spray-${index + 1}`" select @touchstart="touchstartHandle" @touchmove="touchmoveHandle" @touchend="touchendHandle" />
             <div class="content-form">
               <el-form-item label="喷涂路线">
                 <div class="route-img">

src/components/spray/sprayParams/index.vue

@@ -170,9 +170,10 @@ const handleTabsEdit = (targetName: TabPaneName | undefined, action: 'remove' |
     }
     form.value.times.splice(activeTab.value, 1)
   }
-  swiperInstance?.slideTo(activeTab.value)
+
   // 异步任务调用
   setTimeout(() => {
+    swiperInstance?.slideTo(activeTab.value)
     swiperInstance?.update()
   }, 100)
 }
@@ -201,6 +202,20 @@ const onSwiperInitialized = (swiper: any) => {
 const tabChangeHandle = () => {
   swiperInstance?.slideTo(activeTab.value)
 }
+
+const touchstartHandle = () => {
+  swiperInstance.allowTouchMove = false
+}
+
+const touchmoveHandle = () => {
+  swiperInstance.allowTouchMove = false
+  setTimeout(() => {
+    swiperInstance.allowTouchMove = true
+  }, 100)
+}
+const touchendHandle = () => {
+  swiperInstance.allowTouchMove = true
+}
 </script>
 
 <template>
@@ -242,7 +257,7 @@ const tabChangeHandle = () => {
       >
         <SwiperSlide v-for="(item, index) in form.times" :key="index">
           <div class="tab-content">
-            <TrayGraph ref="sprayRefs" :key="index" :edit-select="!disabled" :container="`spray-params-${index + 1}`" select />
+            <TrayGraph ref="sprayRefs" :key="index" :edit-select="!disabled" :container="`spray-params-${index + 1}`" select @touchstart="touchstartHandle" @touchmove="touchmoveHandle" @touchend="touchendHandle" />
             <div class="content-form">
               <el-form-item label="喷涂路线">
                 <div class="route-img">

src/components/spray/trayGraph/index.vue

@@ -15,16 +15,27 @@ const props = defineProps({
     type: Boolean,
     default: true,
   },
-
 })
+
+const emits = defineEmits(['touchstart', 'touchmove', 'touchend'])
+
 const stage = ref()
 const layer = ref()
 const rect = ref()
 const tr = ref()
 const lines = ref<Konva.Line[]>([]) // 修改: 将 line 改为 lines 数组
-
+const graphRef = ref()
 onMounted(() => {
   addStage()
+  graphRef.value.addEventListener('touchstart', (e: any) => {
+    emits('touchstart', e)
+  })
+  graphRef.value.addEventListener('touchmove', (e: any) => {
+    emits('touchmove', e)
+  })
+  graphRef.value.addEventListener('touchend', (e: any) => {
+    emits('touchend', e)
+  })
 })
 
 const zoom = 5
@@ -46,7 +57,7 @@ const addStage = () => {
   layer.value.draw()
 }
 
-let newWidth = (25) * zoom
+let newWidth = 25 * zoom
 let newHeight = (75 - 15 * 2) * zoom
 
 const addSelect = () => {
@@ -76,7 +87,12 @@ const addSelect = () => {
   })
 
   // 在onMounted中rect创建后添加拖拽监听
+  rect.value.on('dragstart', (event: any) => {
+    event.evt.stopPropagation()
+    event.cancelBubble = true // 阻止事件冒泡
+  })
   rect.value.on('dragmove', (event: any) => {
+    event.evt.stopPropagation()
     event.cancelBubble = true // 阻止事件冒泡
     const pos = rect.value.position()
     const width = newWidth
@@ -123,14 +139,6 @@ const addSelect = () => {
       return newBoundBox
     },
   })
-  // 监听 Transformer 的事件以阻止冒泡
-  tr.value.on('dragmove', (event: any) => {
-    event.cancelBubble = true // 阻止事件冒泡
-  })
-
-  tr.value.on('dragend', (event: any) => {
-    event.cancelBubble = true // 阻止事件冒泡
-  })
 
   layer.value.add(rect.value)
   layer.value.add(tr.value)
@@ -265,7 +273,7 @@ defineExpose({
     <!--      <div class="line" /> -->
     <!--      <div class="line" /> -->
     <!--    </div> -->
-    <div :id="container" />
+    <div :id="container" ref="graphRef" />
     <!--    <div class="right-line"> -->
     <!--      <div class="line" /> -->
     <!--      <div class="line" /> -->