feat: 新增页面框选效果

2026-04-23 00:00:12 +08:00 · 2022-08-18 20:30:02 +08:00
parent a54a007c5a
commit f02e92a58e
9 changed files with 179 additions and 21 deletions
@@ -0,0 +1,107 @@
+<template>
+  <div class="go-edit-select" v-if="isSelect" :style="positionStyle">
+    <div class="select-background"></div>
+    <div class="select-border"></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, toRefs, watch } from 'vue'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { useDesignStore } from '@/store/modules/designStore/designStore'
+import { useSizeStyle, useComponentStyle } from '../../hooks/useStyle.hook'
+import { selectBoxIndex } from '@/settings/designSetting'
+
+// 全局颜色
+const designStore = useDesignStore()
+const themeColor = ref(designStore.getAppTheme)
+const chartEditStore = useChartEditStore()
+const { isSelect, scale } = toRefs(chartEditStore.getEditCanvas)
+
+// 位置
+const positionStyle = ref()
+
+watch(
+  () => chartEditStore.getMousePosition,
+  positionInfo => {
+    if (!isSelect.value) return
+
+    const { startX, startY, x, y } = positionInfo
+
+    const attr = {
+      zIndex: selectBoxIndex,
+      // left
+      x: 0,
+      // top
+      y: 0,
+      // 宽
+      w: 0,
+      // 高
+      h: 0
+    }
+
+    // 处理位置
+    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
+      attr.y = startY - attr.h
+    }
+
+    positionStyle.value = {
+      ...useComponentStyle(attr, selectBoxIndex),
+      ...useSizeStyle(attr)
+    }
+  },
+  {
+    deep: true
+  }
+)
+</script>
+
+<style lang="scss" scoped>
+@include go('edit-select') {
+  position: absolute;
+  .select-border,
+  .select-background {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    border-radius: 10px;
+    overflow: hidden;
+  }
+  .select-border {
+    left: 0;
+    top: 0;
+    opacity: 1;
+    border-width: 2px;
+    border-style: solid;
+    border-color: v-bind('themeColor');
+  }
+  .select-background {
+    top: 2px;
+    left: 2px;
+    opacity: 0.1;
+    background-color: v-bind('themeColor');
+  }
+}
+</style>