fix:移除测试内容
This commit is contained in:
@ -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>
|
||||
Reference in New Issue
Block a user