liuhuajie/lowcode-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix:调整组件布局

Browse Source
This commit is contained in:
lhj
2024-09-26 00:57:45 +08:00
parent 7902b17303
commit a132abf963
1 changed files with 24 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
src/components/MainView.vue
View File

@ -4,37 +4,38 @@
<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;">
<a-layout-sider style="background-color: aliceblue;width: fit-content;">
<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 ref="el2" style="display: flex;flex-direction: column;height: 500px;width: 100%;">
<div v-for="item in componentsList" :key="item.id"
style="height: 30px;width: 250px;border: 1px solid red;">
{{ item.name }}:{{ item.id }}
</div>
</div>
</a-layout-sider>
<a-layout-content>
<div style="margin-left: 64px;">
<div style="display: flex;flex-direction: row;width: 100%;">
<div class="flex justify-between">
<NestedFunction v-model="list"></NestedFunction>
{{ list }}
</div>
</div>
<div class="flex justify-between">
<NestedFunction v-model="list" class="w-full"></NestedFunction>
{{ list }}
<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>
</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>