From 9ff4f1f7a91ce6df7871dab3cfef7e434777763c Mon Sep 17 00:00:00 2001
From: owen <owen@evolsun.com>
Date: Thu, 7 Dec 2023 21:18:51 +0800
Subject: [PATCH] =?UTF-8?q?=E5=95=86=E5=9F=8E=E8=A3=85=E4=BF=AE=EF=BC=9A?=
 =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E5=90=8C=E4=B8=80=E7=B1=BB=E5=9E=8B=E7=9A=84?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E5=88=87=E6=8D=A2=E6=97=B6=EF=BC=8C=E5=8F=B3?=
 =?UTF-8?q?=E4=BE=A7=E5=B1=9E=E6=80=A7=E9=9D=A2=E6=9D=BF=E4=B8=8D=E6=9B=B4?=
 =?UTF-8?q?=E6=96=B0=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/DiyEditor/components/ComponentLibrary.vue | 4 +++-
 src/components/DiyEditor/index.vue                       | 2 ++
 src/components/DiyEditor/util.ts                         | 2 ++
 3 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/DiyEditor/components/ComponentLibrary.vue b/src/components/DiyEditor/components/ComponentLibrary.vue
index e319a5c2..64b2febc 100644
--- a/src/components/DiyEditor/components/ComponentLibrary.vue
+++ b/src/components/DiyEditor/components/ComponentLibrary.vue
@@ -82,7 +82,9 @@ watch(
 
 // 克隆组件
 const handleCloneComponent = (component: DiyComponent<any>) => {
-  return cloneDeep(component)
+  const instance = cloneDeep(component)
+  instance.uid = new Date().getTime()
+  return instance
 }
 </script>
 
diff --git a/src/components/DiyEditor/index.vue b/src/components/DiyEditor/index.vue
index 3b318f9e..6cb5d6bd 100644
--- a/src/components/DiyEditor/index.vue
+++ b/src/components/DiyEditor/index.vue
@@ -111,6 +111,7 @@
             view-class="p-[var(--el-card-padding)] p-b-[calc(var(--el-card-padding)+var(--el-card-padding))] property"
           >
             <component
+              :key="selectedComponent?.uid || selectedComponent?.id"
               :is="selectedComponent?.id + 'Property'"
               v-model="selectedComponent.property"
             />
@@ -296,6 +297,7 @@ const handleMoveComponent = (index: number, direction: number) => {
 /** 复制组件 */
 const handleCopyComponent = (index: number) => {
   const component = cloneDeep(pageComponents.value[index])
+  component.uid = new Date().getTime()
   pageComponents.value.splice(index + 1, 0, component)
 }
 /**
diff --git a/src/components/DiyEditor/util.ts b/src/components/DiyEditor/util.ts
index 606e53a2..70bee9c1 100644
--- a/src/components/DiyEditor/util.ts
+++ b/src/components/DiyEditor/util.ts
@@ -5,6 +5,8 @@ import { TabBarProperty } from '@/components/DiyEditor/components/mobile/TabBar/
 
 // 页面装修组件
 export interface DiyComponent<T> {
+  // 用于区分同一种组件的不同实例
+  uid: number
   // 组件唯一标识
   id: string
   // 组件名称