feat: 新增框选功能

src/views/chart/ContentEdit/components/EditSelect/index.vue

@@ -26,6 +26,7 @@ watch(
   positionInfo => {
     if (!isSelect.value) return
 
+    // 这里的 x,y 是已经计算过的相对位移值
     const { startX, startY, x, y } = positionInfo
 
     const attr = {
@@ -42,25 +43,25 @@ watch(
 
     // 处理位置
     if (x > startX && y > startY) {
-      // 右下
+      // 右下方向
       attr.x = startX
       attr.y = startY
       attr.w = Math.round((x - startX) / scale.value)
       attr.h = Math.round((y - startY) / scale.value)
     } else if (x > startX && y < startY) {
-      // 右上
+      // 右上方向
       attr.x = startX
       attr.w = Math.round((x - startX) / scale.value)
       attr.h = Math.round((startY - y) / scale.value)
       attr.y = startY - attr.h
     } else if (x < startX && y > startY) {
-      // 左下
+      // 左下方向
       attr.y = startY
       attr.w = Math.round((startX - x) / scale.value)
       attr.h = Math.round((y - startY) / scale.value)
       attr.x = startX - attr.w
     } else {
-      // 左上
+      // 左上方向
       attr.w = Math.round((startX - x) / scale.value)
       attr.h = Math.round((startY - y) / scale.value)
       attr.x = startX - attr.w
@@ -92,7 +93,7 @@ watch(
   .select-border {
     left: 0;
     top: 0;
-    opacity: 1;
+    opacity: 0.5;
     border-width: 2px;
     border-style: solid;
     border-color: v-bind('themeColor');
@@ -100,7 +101,7 @@ watch(
   .select-background {
     top: 2px;
     left: 2px;
-    opacity: 0.1;
+    opacity: 0.03;
     background-color: v-bind('themeColor');
   }
 }