From 8ea884a71ec7e3728ef8c65501521a516a372cca Mon Sep 17 00:00:00 2001
From: lhj <403133128@qq.com>
Date: Wed, 13 Nov 2024 00:20:25 +0800
Subject: [PATCH] =?UTF-8?q?fix:=E4=BF=AE=E6=94=B9=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E6=95=B0=E6=8D=AE=E6=9B=B4=E6=96=B0=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 preview/views/MainView.vue          |  6 +--
 src/components/DynamicComponent.vue | 70 ++++++++++++-----------------
 2 files changed, 32 insertions(+), 44 deletions(-)

diff --git a/preview/views/MainView.vue b/preview/views/MainView.vue
index bd117fd..dfce25a 100644
--- a/preview/views/MainView.vue
+++ b/preview/views/MainView.vue
@@ -78,9 +78,9 @@ let list = ref([]);
 let componentsList = [];
 const store = useSchemeStore();
 
-watch(store, (n) => {
-  console.log("store发生了变化", n);
-});
+// watch(store, (n) => {
+//   console.log("store发生了变化", n);
+// });
 
 const baseScheme = {
   "type": "AdaptivePage",
diff --git a/src/components/DynamicComponent.vue b/src/components/DynamicComponent.vue
index 3f1054e..10123c9 100644
--- a/src/components/DynamicComponent.vue
+++ b/src/components/DynamicComponent.vue
@@ -1,14 +1,16 @@
 <template>
-  <component v-if="componentVisible" @click.stop="handleClick" :id="componentId" :is="componentType" v-bind="componentProps"
-             :class="componentClass" :style="componentStyle">
-    {{ componentText }}
-    <template v-for="child in componentChildren" :key="child.id">
-      <DynamicComponent :component-data="child" />
-    </template>
-    <template v-for="(slot, key, index) in componentSlots" :key="index" v-slot:[key]>
-      <DynamicComponent :component-data="slot" />
-    </template>
-  </component>
+  <div onclick="handleClick">
+    <component v-if="componentVisible" :id="componentId" :is="componentType" v-bind="componentPropsWithDisabled"
+               :class="componentClass" :style="componentStyle">
+      {{ componentText }}
+      <template v-for="child in componentChildren" :key="child.id">
+        <DynamicComponent :component-data="child" />
+      </template>
+      <template v-for="(slot, key, index) in componentSlots" :key="index" v-slot:[key]>
+        <DynamicComponent :component-data="slot" />
+      </template>
+    </component>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -24,22 +26,22 @@ const props = defineProps({
 onMounted(() => {
   console.log(props.componentData);
 });
-
-const componentId = ref(props.componentData?.id || '');
-const componentType = ref(markRaw(componentMapping[props.componentData?.type]) || 'div'); // 使用 markRaw
-const componentProps = ref(props.componentData?.props || {});
-const componentDisable = ref(props.componentData?.disable || false);
-const componentVisible = ref(props.componentData?.visible || true);
-const componentChildren = ref(props.componentData?.children || []);
-const componentText = ref(props.componentData?.text || '');
-const componentClass = ref(props.componentData?.class || []);
-const componentStyle = ref(props.componentData?.style || []);
-const componentSlots = ref(props.componentData?.slots || {});
+const componentId = computed(() => props.componentData?.id || '');
+const componentType = computed(() => markRaw(componentMapping[props.componentData?.type]) || 'div');
+const componentProps = computed(() => props.componentData?.props || {});
+const componentDisable = computed(() => props.componentData?.disable || false);
+const componentVisible = computed(() => props.componentData?.visible);
+const componentChildren = computed(() => props.componentData?.children || []);
+const componentText = computed(() => props.componentData?.text || '');
+const componentClass = computed(() => props.componentData?.class || []);
+const componentStyle = computed(() => props.componentData?.style || []);
+const componentSlots = computed(() => props.componentData?.slots || {});
 
 // 确保 componentProps 包含 disabled 属性
-watch(componentDisable, (newDisable) => {
-  componentProps.value['disabled'] = newDisable;
-});
+const componentPropsWithDisabled = computed(() => ({
+  ...componentProps.value,
+  disabled: componentDisable.value
+}));
 
 // 获取当前组件的最新数据
 const getCurrentSchemeObj = () => {
@@ -47,23 +49,9 @@ const getCurrentSchemeObj = () => {
 };
 
 // 监听 previewScheme 的变化
-watch(() => store.previewScheme, (newPreviewScheme) => {
-  // 重新获取当前组件的最新数据
-  const currentComponent = getCurrentSchemeObj();
-  console.log("currentComponent", JSON.stringify(currentComponent));
-  if (currentComponent) {
-    // 更新组件数据
-    componentProps.value = currentComponent.props ;
-    componentDisable.value = currentComponent.disable ;
-    componentVisible.value = currentComponent?.visible;
-    componentChildren.value = currentComponent.children ;
-    componentText.value = currentComponent.text;
-    componentClass.value = currentComponent.class ;
-    componentStyle.value = currentComponent.style ;
-    componentSlots.value = currentComponent.slots ;
-  }
-  console.log("store.previewScheme has changed",componentVisible.value)
-}, { deep: true });
+// watch(() => props.componentData, (n) => {
+//   console.log("currentComponent", JSON.stringify(n));
+// }, { deep: true });
 
 const handleClick = () => {
   console.log(`Component with id ${JSON.stringify(getCurrentSchemeObj())} was clicked.`);