From 33468cf39b065cd7bd65c394dd9a6cc1c363484a Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Thu, 1 Apr 2021 14:31:45 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E5=A2=9E=E5=8A=A0=E7=94=BB=E5=B8=83?=
 =?UTF-8?q?=E9=BC=A0=E6=A0=87=E6=82=AC=E5=81=9C=E8=99=9A=E7=BA=BF=E8=BE=B9?=
 =?UTF-8?q?=E6=A1=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../canvas/components/Editor/Shape.vue        | 42 +++++++++++++++----
 1 file changed, 35 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/canvas/components/Editor/Shape.vue b/frontend/src/components/canvas/components/Editor/Shape.vue
index f72cc80c1b..a30034d051 100644
--- a/frontend/src/components/canvas/components/Editor/Shape.vue
+++ b/frontend/src/components/canvas/components/Editor/Shape.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="shape" :class="{ active }" @click="selectCurComponent" @mousedown="handleMouseDownOnShape">
+  <div class="shape" :class="classInfo" @mouseenter="enter" @mouseleave="leave" @click="selectCurComponent" @mousedown="handleMouseDownOnShape">
     <span v-show="isActive()" class="iconfont icon-xiangyouxuanzhuan" @mousedown="handleRotate" />
     <span v-show="element.isLock" class="iconfont icon-suo" />
     <div
@@ -26,6 +26,10 @@ export default {
       type: Boolean,
       default: false
     },
+    mouseon: {
+      type: Boolean,
+      default: false
+    },
     element: {
       require: true,
       type: Object
@@ -65,10 +69,22 @@ export default {
       cursors: {}
     }
   },
-  computed: mapState([
-    'curComponent',
-    'editor'
-  ]),
+
+  computed: {
+    classInfo() {
+      if (this.active) {
+        return 'active'
+      } else if (this.mouseon) {
+        return 'mouseon'
+      } else {
+        return ''
+      }
+    },
+    ...mapState([
+      'curComponent',
+      'editor'
+    ])
+  },
   mounted() {
     // 用于 Group 组件
     if (this.curComponent) {
@@ -76,16 +92,23 @@ export default {
     }
 
     eventBus.$on('runAnimation', () => {
-      if (this.element == this.curComponent) {
+      if (this.element === this.curComponent) {
         runAnimation(this.$el, this.curComponent.animations)
       }
     })
   },
   methods: {
+    // 鼠标移入事件
+    enter() {
+      this.mouseon = true
+    },
+    // 鼠标移出事件
+    leave() {
+      this.mouseon = false
+    },
     isActive() {
       return this.active && !this.element.isLock
     },
-
     // 处理旋转
     handleRotate(e) {
       this.$store.commit('setClickComponentStatus', true)
@@ -355,6 +378,11 @@ export default {
     outline: 1px solid #70c0ff;
     user-select: none;
 }
+
+.mouseon {
+  outline: 1px dashed #70c0ff;
+  user-select: none;
+}
 .shape-point {
     position: absolute;
     background: #fff;