From 991b134e233558108eb5476e85a195adba13699c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A5=94=E8=B7=91=E7=9A=84=E9=9D=A2=E6=9D=A1?=
 <1262327911@qq.com>
Date: Mon, 11 Apr 2022 17:06:04 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E6=8A=BD=E7=A6=BB=E6=B0=B4=E5=8D=B0?=
 =?UTF-8?q?=E7=9A=84=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/EditRange/index.vue            | 41 +++++++++++--------
 .../components/EditWatermark/index.ts         |  3 ++
 .../components/EditWatermark/index.vue        | 27 ++++++++++++
 3 files changed, 54 insertions(+), 17 deletions(-)
 create mode 100644 src/views/chart/ContentEdit/components/EditWatermark/index.ts
 create mode 100644 src/views/chart/ContentEdit/components/EditWatermark/index.vue

diff --git a/src/views/chart/ContentEdit/components/EditRange/index.vue b/src/views/chart/ContentEdit/components/EditRange/index.vue
index faf35e75..7ea38ad1 100644
--- a/src/views/chart/ContentEdit/components/EditRange/index.vue
+++ b/src/views/chart/ContentEdit/components/EditRange/index.vue
@@ -4,25 +4,15 @@
     :style="rangeStyle"
     @mousedown="mousedownHandleUnStop($event, undefined)"
   >
-    <n-watermark
-      id="go-edit-watermark"
-      :content="watermarkText"
-      cross
-      selectable
-      :font-size="16"
-      :line-height="16"
-      :width="500"
-      :height="150"
-      :x-offset="12"
-      :y-offset="80"
-      :rotate="-15"
-      style="display: none; width: 100%; height: 100%;"
-    ></n-watermark>
     <slot></slot>
+    <!-- 水印 -->
+    <edit-watermark></edit-watermark>
     <!-- 标尺 -->
     <edit-rule></edit-rule>
     <!-- 拖拽时的辅助线 -->
     <edit-align-line></edit-align-line>
+    <!-- 拖拽时的遮罩 -->
+    <div class="go-edit-range-model" :style="rangeModelStyle"></div>
   </div>
 </template>
 
@@ -32,8 +22,8 @@ import { useSizeStyle } from '../../hooks/useStyle.hook'
 import { mousedownHandleUnStop } from '../../hooks/useDrag.hook'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { EditAlignLine } from '../EditAlignLine'
+import { EditWatermark } from '../EditWatermark'
 import { EditRule } from '../EditRule'
-import { watermarkText } from '@/settings/designSetting'
 
 const chartEditStore = useChartEditStore()
 
@@ -65,13 +55,30 @@ const rangeStyle = computed(() => {
   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>
 @include go(edit-range) {
   position: relative;
   transform-origin: left top;
-  @include filter-border-color("hover-border-color");
-  @include filter-bg-color("background-color2");
+  @include filter-border-color('hover-border-color');
+  @include filter-bg-color('background-color2');
+
+  @include go(edit-range-model) {
+    z-index: -1;
+    position: absolute;
+    left: 0;
+    top: 0;
+    border-radius: 15px;
+    border: 1px solid rgba(0, 0, 0, 0);
+    background-color: greenyellow;
+    opacity: 1;
+  }
 }
 </style>
diff --git a/src/views/chart/ContentEdit/components/EditWatermark/index.ts b/src/views/chart/ContentEdit/components/EditWatermark/index.ts
new file mode 100644
index 00000000..77882abc
--- /dev/null
+++ b/src/views/chart/ContentEdit/components/EditWatermark/index.ts
@@ -0,0 +1,3 @@
+import EditWatermark from './index.vue'
+
+export { EditWatermark }
diff --git a/src/views/chart/ContentEdit/components/EditWatermark/index.vue b/src/views/chart/ContentEdit/components/EditWatermark/index.vue
new file mode 100644
index 00000000..09dba8d8
--- /dev/null
+++ b/src/views/chart/ContentEdit/components/EditWatermark/index.vue
@@ -0,0 +1,27 @@
+<template>
+  <n-watermark
+    id="go-edit-watermark"
+    :content="watermarkText"
+    cross
+    selectable
+    :font-size="16"
+    :line-height="16"
+    :width="500"
+    :height="150"
+    :x-offset="12"
+    :y-offset="80"
+    :rotate="-15"
+  ></n-watermark>
+</template>
+
+<script setup lang="ts">
+import { watermarkText } from '@/settings/designSetting'
+</script>
+
+<style lang="scss" scoped>
+#go-edit-watermark {
+  display: none;
+  width: 100%;
+  height: 100%;
+}
+</style>
\ No newline at end of file