fix:移除测试内容

This commit is contained in:
lhj
2024-09-24 01:13:16 +08:00
parent c2cb2ea1fe
commit 7902b17303

View File

@ -1,42 +1,48 @@
<template>
<div>
<div style="display: flex;flex-direction: row;">
<div ref="el2"
style="margin: 5%;display: flex;flex-direction: column;overflow-x:scroll;height: 350px;width: 300px;">
<div v-for="item in componentsList" :key="item.id" style="height: 30px;width: 300px;border: 1px solid red;">
{{ item.name }}:{{ item.id }}
</div>
</div>
<div class="flex justify-between">
<NestedFunction v-model="list" class="w-full"></NestedFunction>
{{ list }}
</div>
</div>
<div style="width: 800px;height:500px">
动态渲染
<!-- <component :is="componentMapping['Rate']" v-bind="{}"/> -->
<DynamicComponent v-for="component in list" :key="component.id" :componentData="component">
{{ component.id }}
</DynamicComponent>
</div>
<div>
<a-layout style="height: 400px;">
<a-layout-header>Header</a-layout-header>
<a-layout>
<a-layout-sider style="background-color: aliceblue;">Sider</a-layout-sider>
<a-layout-content>
<div style="display: flex;flex-direction: row;">
<div ref="el2"
style="margin: 5%;display: flex;flex-direction: column;overflow-x:scroll;height: 350px;width: 300px;">
<div v-for="item in componentsList" :key="item.id"
style="height: 30px;width: 300px;border: 1px solid red;">
{{ item.name }}:{{ item.id }}
</div>
</div>
<div class="flex justify-between">
<NestedFunction v-model="list" class="w-full"></NestedFunction>
{{ list }}
</div>
</div>
<div style="width: 800px;height:500px">
动态渲染
<!-- <component :is="componentMapping['Rate']" v-bind="{}"/> -->
<DynamicComponent v-for="component in list" :key="component.id" :componentData="component">
{{ component.id }}
</DynamicComponent>
</div>
<div>
</div>
</a-layout-content>
</a-layout>
<a-layout-footer>Footer</a-layout-footer>
</a-layout>
</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>
@ -51,14 +57,6 @@ 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[]>([]);
@ -84,7 +82,7 @@ useDraggable(el2, componentsList, {
onClone() {
console.log('clone')
},
clone(element: Record<'id' | 'name' | 'type' | 'children' | 'props' | 'text' | 'class' | 'style'|'slots', any>) {
clone(element: Record<'id' | 'name' | 'type' | 'children' | 'props' | 'text' | 'class' | 'style' | 'slots', any>) {
return {
id: `${element.id}-${uuid()}`,
name: element.name,
@ -103,4 +101,6 @@ useDraggable(el2, componentsList, {
}
}
})
</script>
</script>
<style scoped></style>