From f365775cafb97096ccdc9f2ad67604631b0397a0 Mon Sep 17 00:00:00 2001
From: snowflake <Linux369@outlook.com>
Date: Sat, 25 Oct 2025 11:37:23 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E3=80=90mall=20=E5=95=86=E5=9F=8E?=
 =?UTF-8?q?=E3=80=91=20=E4=BF=AE=E5=A4=8D=20DiyEditor=20=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E7=9A=84=E5=BE=AA=E7=8E=AF=E6=B8=B2=E6=9F=93=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/DiyEditor/index.vue | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/components/DiyEditor/index.vue b/src/components/DiyEditor/index.vue
index fa23a4d0f..7a1456857 100644
--- a/src/components/DiyEditor/index.vue
+++ b/src/components/DiyEditor/index.vue
@@ -142,7 +142,7 @@
         >
           <!-- 组件名称 -->
           <template #header>
-            <div class="flex items-center gap-8px">
+            <div class="flex items-center gap-[8px]">
               <Icon :icon="selectedComponent?.icon" color="gray" />
               <span>{{ selectedComponent?.name }}</span>
             </div>
@@ -167,7 +167,7 @@
     <div class="flex justify-around">
       <IFrame
         :src="previewUrl"
-        class="w-375px border-4px border-rounded-8px border-solid p-2px h-667px!"
+        class="w-[375px] border-[4px] border-rounded-[8px] border-solid p-[2px] h-[667px]!"
       />
       <div class="flex flex-col">
         <el-text>手机扫码预览</el-text>
@@ -233,11 +233,15 @@ const props = defineProps({
   previewUrl: propTypes.string.def('')
 })
 
+const isUpdatingFromProp = ref(false)
+
 // 监听传入的页面配置
 // 解析出 pageConfigComponent 页面整体的配置，navigationBarComponent、pageComponents、tabBarComponent 页面上、中、下的配置
 watch(
   () => props.modelValue,
   () => {
+    // 标志位，表示正在从外部传入的配置更新组件配置，防止引起死循环
+    isUpdatingFromProp.value = true
     const modelValue =
       isString(props.modelValue) && !isEmpty(props.modelValue)
         ? (JSON.parse(props.modelValue) as PageConfig)
@@ -256,9 +260,14 @@ watch(
         return { ...component, property: item.property }
       }
     )
+    // 更新完成，在下一个 tick 中重置标志位
+    nextTick(() => {
+      isUpdatingFromProp.value = false
+    })
   },
   {
-    immediate: true
+    immediate: true,
+    deep: true // 深度监听，防止属性变化时不更新
   }
 )
 
@@ -302,6 +311,7 @@ const pageConfigChange = () => {
   const modelValue = isString(props.modelValue) ? JSON.stringify(pageConfig) : pageConfig
   emits('update:modelValue', modelValue)
 }
+// 监听页面配置变化
 watch(
   () => [
     pageConfigComponent.value.property,
@@ -310,6 +320,8 @@ watch(
     pageComponents.value
   ],
   () => {
+    //如果是从外部传入的配置更新引起的变化，则不触发更新
+    if (isUpdatingFromProp.value) return
     pageConfigChange()
   },
   { deep: true }
-- 
Gitee