From 67aef1df33c54ed6ef34a54ac940d88b7ce6c069 Mon Sep 17 00:00:00 2001
From: lhj <403133128@qq.com>
Date: Mon, 23 Sep 2024 23:16:50 +0800
Subject: [PATCH] =?UTF-8?q?add:=E6=B7=BB=E5=8A=A0=E6=8F=92=E6=A7=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/DynamicComponent.vue |  9 ++++++-
 src/components/TestComponent.vue    | 37 +++++++++++++++++----------
 src/components/VueDemo.vue          | 39 +++++++++++++++++++++--------
 3 files changed, 61 insertions(+), 24 deletions(-)

diff --git a/src/components/DynamicComponent.vue b/src/components/DynamicComponent.vue
index 1d42453..250b4ba 100644
--- a/src/components/DynamicComponent.vue
+++ b/src/components/DynamicComponent.vue
@@ -5,6 +5,11 @@
     <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>
 
 </template>
@@ -23,9 +28,11 @@ onMounted(() => {
 const componentType = computed(() => componentMapping[props.componentData?.type] || 'div');
 const componentProps = computed(() => props.componentData?.props || {});
 const componentChildren = computed(() => props.componentData?.children || []);
-const componentText = computed(() => props.componentData?.text ||'');
+const componentText = computed(() => props.componentData?.text || '');
 const componentClass = computed(() => props.componentData?.class || []);
 const componentStyle = computed(() => props.componentData?.style || []);
+const componentSlots = computed(() => props.componentData?.slots || []);
+
 
 
 </script>
\ No newline at end of file
diff --git a/src/components/TestComponent.vue b/src/components/TestComponent.vue
index e12feff..8453cbb 100644
--- a/src/components/TestComponent.vue
+++ b/src/components/TestComponent.vue
@@ -1,18 +1,29 @@
+<!-- DynamicSlotsComponent.vue -->
 <template>
-  <div class="my-component">
-    <slot name="header"></slot>
-    <slot name="extra"></slot>
+  <div>
+    <!-- 动态插槽 -->
+
+    <div>
+      <slot name="header"></slot>
+    </div>
+
+    <div>
+      <slot name="main"></slot>
+    </div>
+    
+    <div>
+      <slot name="footer"></slot>
+    </div>
+
+
   </div>
 </template>
 
-<script>
-export default {
-  name: 'MyComponent',
-};
-</script>
+<script setup>
+import { defineProps } from 'vue';
 
-<style scoped>
-.my-component {
-  /* 添加样式 */
-}
-</style>
\ No newline at end of file
+// 接收一个动态插槽名作为 prop
+const props = defineProps({
+  dynamicSlotName: String
+});
+</script>
\ No newline at end of file
diff --git a/src/components/VueDemo.vue b/src/components/VueDemo.vue
index 47e5589..7a89c7f 100644
--- a/src/components/VueDemo.vue
+++ b/src/components/VueDemo.vue
@@ -1,5 +1,9 @@
 <template>
   <div>
+
+
+
+    
     <div style="display: flex;flex-direction: row;">
 
       <div ref="el2"
@@ -24,14 +28,20 @@
         {{ component.id }}
       </DynamicComponent>
     </div>
-    <TestComponent>
-      <template #header>
-        <div>
-          header
-        </div>
+    <div>
+
+    <TestComponent >
+      <!-- 默认插槽内容 -->
+      <template #default>
+        Default slot content.
+      </template>
+      <!-- 动态插槽内容 -->
+      <template v-for="(slot, index) in dynamicSlotContents" :key="index" v-slot:[slot.slotName]>
+        {{ slot.content }}
       </template>
     </TestComponent>
   </div>
+  </div>
 
 
 </template>
@@ -41,16 +51,25 @@ import { onMounted, ref } from 'vue';
 import NestedFunction from './NestedFunction.vue';
 import DynamicComponent from './DynamicComponent.vue';
 
-import { useDraggable } from 'vue-draggable-plus'
+import { useDraggable } from 'vue-draggable-plus';
 import { uuid } from 'lsp-uuid';
 import { IComponent } from '../type/IComponent.ts';
 import { componentScheme } from '../schemes/scheme.ts';
 import TestComponent from './TestComponent.vue';
+
+const dynamicSlotContents = ref([
+  { slotName: 'header', content: 'Header content' },
+  { slotName: 'footer', content: 'Footer content' },
+  { slotName: 'main', content: 'Main content' }
+]);
+
+
 const componentsList = ref<any[]>([]);
 
-const list = ref<IComponent[]>([])
 
-const el2 = ref()
+const list = ref<IComponent[]>([]);
+
+const el2 = ref();
 
 
 onMounted(() => {
@@ -69,7 +88,7 @@ useDraggable(el2, componentsList, {
   onClone() {
     console.log('clone')
   },
-  clone(element: Record<'id' | 'name' | 'type' | 'children' | 'props' | 'text' | 'class' | 'style', any>) {
+  clone(element: Record<'id' | 'name' | 'type' | 'children' | 'props' | 'text' | 'class' | 'style'|'slots', any>) {
     return {
       id: `${element.id}-${uuid()}`,
       name: element.name,
@@ -81,7 +100,7 @@ useDraggable(el2, componentsList, {
       children: [],
       style: element.style,
       visible: "",
-      slots: {},
+      slots: element.slots,
       disable: "",
       events: {},
       loop: {},