fix:移除测试内容
This commit is contained in:
@ -1,42 +1,48 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<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>
|
<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>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
@ -51,14 +57,6 @@ import { useDraggable } from 'vue-draggable-plus';
|
|||||||
import { uuid } from 'lsp-uuid';
|
import { uuid } from 'lsp-uuid';
|
||||||
import { IComponent } from '../type/IComponent.ts';
|
import { IComponent } from '../type/IComponent.ts';
|
||||||
import { componentScheme } from '../schemes/scheme.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 componentsList = ref<any[]>([]);
|
||||||
|
|
||||||
@ -84,7 +82,7 @@ useDraggable(el2, componentsList, {
|
|||||||
onClone() {
|
onClone() {
|
||||||
console.log('clone')
|
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 {
|
return {
|
||||||
id: `${element.id}-${uuid()}`,
|
id: `${element.id}-${uuid()}`,
|
||||||
name: element.name,
|
name: element.name,
|
||||||
@ -104,3 +102,5 @@ useDraggable(el2, componentsList, {
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<style scoped></style>
|
||||||
Reference in New Issue
Block a user