From c95d513f4db41e0e01b2f755d72df33cf6b37c18 Mon Sep 17 00:00:00 2001
From: ShawnPhang <palxiao@vip.qq.com>
Date: Fri, 22 Mar 2024 16:16:32 +0800
Subject: [PATCH] fix: image crop out of focus

---
 src/common/methods/DesignFeatures/setWidgetData.ts   |  5 ++---
 .../modules/widgets/wImage/wImageStyle.vue           | 12 ++++++++----
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/common/methods/DesignFeatures/setWidgetData.ts b/src/common/methods/DesignFeatures/setWidgetData.ts
index 2d54607..26aa138 100644
--- a/src/common/methods/DesignFeatures/setWidgetData.ts
+++ b/src/common/methods/DesignFeatures/setWidgetData.ts
@@ -2,8 +2,8 @@
  * @Author: ShawnPhang
  * @Date: 2022-02-22 15:06:14
  * @Description: 设置元素时根据类型处理
- * @LastEditors: ShawnPhang <site: book.palxp.com>
- * @LastEditTime: 2023-07-03 10:10:53
+ * @LastEditors: ShawnPhang <https://m.palxp.cn>
+ * @LastEditTime: 2024-03-22 16:00:17
  */
 // import store from '@/store'
 // import { getImage } from '../getImgDetail'
@@ -30,7 +30,6 @@ export default async function(type: string, item: TCommonItemData, data: Record<
     setting.width = img.width
     setting.height = img.height // parseInt(100 / item.value.ratio, 10)
     setting.imgUrl = item.value.url
-    console.log("setting", setting)
   }
   if (type === 'mask') {
     setting.mask = item.value.url
diff --git a/src/components/modules/widgets/wImage/wImageStyle.vue b/src/components/modules/widgets/wImage/wImageStyle.vue
index 36de2e0..c76db42 100644
--- a/src/components/modules/widgets/wImage/wImageStyle.vue
+++ b/src/components/modules/widgets/wImage/wImageStyle.vue
@@ -3,7 +3,7 @@
  * @Date: 2021-08-09 11:41:53
  * @Description: 
  * @LastEditors: ShawnPhang <https://m.palxp.cn>
- * @LastEditTime: 2023-10-09 00:59:44
+ * @LastEditTime: 2024-03-22 16:14:48
 -->
 <template>
   <div id="w-image-style">
@@ -71,7 +71,7 @@
 <script lang="ts" setup>
 // 图片组件样式
 // const NAME = 'w-image-style'
-import { nextTick, reactive, ref, watch } from 'vue'
+import { nextTick, reactive, ref, watch, onBeforeUnmount } from 'vue'
 import { useStore } from 'vuex'
 import numberInput from '../../settings/numberInput.vue'
 import iconItemSelect, { TIconItemSelectData } from '../../settings/iconItemSelect.vue'
@@ -142,14 +142,18 @@ let lastUuid: string | undefined = undefined
 let tag: boolean
 let toolBarStyle: { left: string, top: string } | null = null
 
+onBeforeUnmount(() => {
+  imgCrop(false)
+  cropHandle()
+})
+
 watch(
   () => dActiveElement.value,
   (newValue, oldValue) => {
     change()
     // 失焦取消编辑模式
     if (newValue.uuid != lastUuid && typeof lastUuid !== 'undefined') {
-      state.innerElement.cropEdit = false
-      store.commit('setShowRotatable', true) // 失焦会导致大小变化锁定的错误
+      imgCrop(false)
     }
     lastUuid = newValue.uuid
   },