Pārlūkot izejas kodu

fix: 去除模态层

MTrun 3 gadi atpakaļ
vecāks
revīzija
e6a7ad9776

+ 0 - 3
src/store/modules/chartEditStore/chartEditStore.d.ts

@@ -10,7 +10,6 @@ export enum EditCanvasTypeEnum {
   SCALE = 'scale',
   USER_SCALE = 'userScale',
   LOCK_SCALE = 'lockScale',
-  IS_CREATE = 'isCreate',
   IS_DRAG= 'isDrag',
 }
 
@@ -27,8 +26,6 @@ export type EditCanvasType = {
   [EditCanvasTypeEnum.USER_SCALE]: number
   // 锁定缩放
   [EditCanvasTypeEnum.LOCK_SCALE]: boolean
-  // 初始化创建
-  [EditCanvasTypeEnum.IS_CREATE]: boolean
   // 拖拽中
   [EditCanvasTypeEnum.IS_DRAG]: boolean
 }

+ 0 - 2
src/store/modules/chartEditStore/chartEditStore.ts

@@ -37,8 +37,6 @@ export const useChartEditStore = defineStore({
       userScale: 1,
       // 锁定缩放
       lockScale: false,
-      // 初始化
-      isCreate: false,
       // 拖拽中
       isDrag: false
     },

+ 5 - 14
src/views/chart/ContentEdit/components/EditRange/index.vue

@@ -5,11 +5,9 @@
     @mousedown="mousedownHandleUnStop($event, undefined)"
   >
     <slot></slot>
+    <!-- 拖拽时的辅助线 -->
+    <EditAlignLine />
   </div>
-  <!-- 拖拽时的辅助线 -->
-  <EditAlignLine />
-  <!-- 拖拽时的遮罩 -->
-  <div class="go-edit-range-model" :style="rangeModelStyle"></div>
 </template>
 
 <script setup lang="ts">
@@ -31,7 +29,7 @@ const size = computed(() => {
 })
 
 const rangeStyle = computed(() => {
-    // 缩放 
+  // 缩放
   const scale = {
     transform: `scale(${getEditCanvas.value.scale})`
   }
@@ -45,17 +43,10 @@ const rangeStyle = computed(() => {
     ? { background: backgroundColor }
     : { background: `url(${backgroundImage}) no-repeat center/100% !important` }
 
-
   // @ts-ignore
   return { ...useSizeStyle(size.value), ...computedBackground, ...scale }
 })
 
-// 模态层
-const rangeModelStyle = computed(() => {
-  const dragStyle = getEditCanvas.value.isCreate && {'z-index': 99999 }
-  // @ts-ignore
-  return { ...useSizeStyle(size.value), ...dragStyle}
-})
 </script>
 
 <style lang="scss" scoped>
@@ -67,7 +58,7 @@ const rangeModelStyle = computed(() => {
   @include fetch-theme('box-shadow');
   @include filter-border-color('hover-border-color');
   @include fetch-theme-custom('border-color', 'background-color4');
-  @include filter-bg-color('background-color2')
+  @include filter-bg-color('background-color2');
 }
 @include go(edit-range-model) {
   z-index: -1;
@@ -77,6 +68,6 @@ const rangeModelStyle = computed(() => {
   border-radius: 15px;
   border: 1px solid rgba(0, 0, 0, 0);
   background-color: greenyellow;
-  opacity: .2;
+  opacity: 0.2;
 }
 </style>

+ 0 - 5
src/views/chart/ContentEdit/hooks/useDrag.hook.ts

@@ -27,9 +27,6 @@ export const handleDrag = async (e: DragEvent) => {
       return
     }
 
-    // 设置拖拽状态
-    chartEditStore.setEditCanvas(EditCanvasTypeEnum.IS_CREATE, false)
-
     const dropData: Exclude<ConfigType, ['image']> = JSON.parse(
       drayDataString
     )
@@ -55,8 +52,6 @@ export const handleDragOver = (e: DragEvent) => {
   e.preventDefault()
   e.stopPropagation()
 
-  // 设置拖拽状态
-  chartEditStore.setEditCanvas(EditCanvasTypeEnum.IS_CREATE, true)
   if (e.dataTransfer) e.dataTransfer.dropEffect = 'copy'
 }