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

添加属性编辑器，调整自适应宽度布局

Browse Source
This commit is contained in:
lhj
2024-10-03 12:57:53 +08:00
parent 4a30d7fb37
commit 9e614657d7
2 changed files with 96 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

143
src/components/MainView.vue
View File

@ -1,72 +1,63 @@
<template> <template>
<div style="display: flex;"> <div class="flex-container">
<div> <div class="component-area">
compoent compoent
</div> </div>
<!-- 组件区域 --> <!-- 组件区域 -->
<div style="overflow-y: auto; overflow-x: hidden; flex-grow: 0; flex-shrink: 0; flex-basis: 250px;"> <div class="component-list">
<div ref="el2" style="display: flex; flex-direction: column; height: 500px; width: 100%;"> <div ref="el2" class="component-list-inner">
<div v-for="item in componentsList" :key="item.id" style="height: 30px; width: 250px; border: 1px solid red;"> <div v-for="item in componentsList" :key="item.id" class="component-item">
{{ item.name }}:{{ item.id }} {{ item.name }}:{{ item.id }}
</div> </div>
</div> </div>
</div> </div>
<div style="flex-grow: 1; flex-shrink: 0; overflow-y: auto;"> <div class="design-area">
<div> <a-row>
<!-- 设计器 --> <a-col flex="80%">
<div <div class="dragArea">
style="display: flex; flex-direction: row; width: 100%; height: 500px; overflow-y: auto; border: 1px solid black;"> <div>
<div class="flex justify-between"> <NestedFunction v-model="list"></NestedFunction>
<NestedFunction v-model="list"></NestedFunction> {{ list }}
{{ list }} </div>
</div> </div>
</div> </a-col>
<!-- 渲染区 --> <a-col flex="20%">
<div style="width: 100%; height: 500px; overflow-y: auto; border: 1px solid black;"> <div class="property-editor">属性编辑器</div>
动态渲染 </a-col>
<!-- <component :is="componentMapping['Rate']" v-bind="{}"/> --> </a-row>
<DynamicComponent v-for="component in list" :key="component.id" :componentData="component">
{{ component.id }}
</DynamicComponent>
</div>
<!-- 测试区域 -->
<div>
<TestComponent></TestComponent>
</div>
<div>
</div>
</div>
<!-- 渲染区 -->
<div class="render-area">
动态渲染
<DynamicComponent v-for="component in list" :key="component.id" :componentData="component">
{{ component.id }}
</DynamicComponent>
</div>
<!-- 测试区域 -->
<div class="test-area">
<TestComponent></TestComponent>
</div>
</div> </div>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import TestComponent from './TestComponent.vue'; import TestComponent from './TestComponent.vue';
import { onMounted, ref } from 'vue'; import { onMounted, ref } from 'vue';
import NestedFunction from './NestedFunction.vue'; import NestedFunction from './NestedFunction.vue';
import DynamicComponent from './DynamicComponent.vue'; import DynamicComponent from './DynamicComponent.vue';
import { useDraggable } from 'vue-draggable-plus'; import { useDraggable } from 'vue-draggable-plus';
import { uuid } from 'lsp-uuid'; import { uuid } from 'lsp-uuid';
import { IPageComponent } from '../type/IPageComponent.ts'; import { IPageComponent } from '../type/IPageComponent';
import { componentScheme } from '../schemes/scheme.ts'; import { componentScheme } from '../schemes/scheme';
const componentsList = ref<any[]>([]); const componentsList = ref<any[]>([]);
const list = ref<IPageComponent[]>([]); const list = ref<IPageComponent[]>([]);
const el2 = ref(); const el2 = ref();
onMounted(() => { onMounted(() => {
const loadedComponents = Object.values(componentScheme) const loadedComponents = Object.values(componentScheme);
componentsList.value = loadedComponents componentsList.value = loadedComponents;
// console.log(loadedComponents)
}); });
useDraggable(el2, componentsList, { useDraggable(el2, componentsList, {
@ -74,11 +65,10 @@ useDraggable(el2, componentsList, {
group: { name: 'designer', pull: 'clone', put: false }, group: { name: 'designer', pull: 'clone', put: false },
sort: false, sort: false,
onClone() { onClone() {
console.log('clone') console.log('clone');
}, },
clone(element: Record<'id' | 'name' | 'type' | 'children' | 'props' | 'text' | 'class' | 'style' | 'slots', any>) { clone(element) {
return { return {
// id: `${element.id}-${uuid()}`,
id: uuid(), id: uuid(),
name: element.name, name: element.name,
type: element.type, type: element.type,
@ -93,9 +83,66 @@ useDraggable(el2, componentsList, {
disable: "", disable: "",
events: {}, events: {},
loop: {}, loop: {},
} };
} }
}) });
</script> </script>
<style scoped></style> <style scoped>
.flex-container {
display: flex;
flex-wrap: nowrap;
align-items: stretch;
width: 100%; /* Ensure the container takes full width */
}
.component-area {
flex-grow: 1;
max-width: 72px; /* Fixed width or can be adjusted */
}
.component-list {
flex-grow: 1;
max-width: 250px; /* Fixed width or can be adjusted */
}
.component-list-inner {
display: flex;
flex-direction: column;
height: 500px;
}
.component-item {
height: 30px;
width: 250px;
border: 1px solid red;
}
.design-area {
flex-grow: 1;
overflow-x: auto;
}
.dragArea {
overflow-x: auto;
display: flex;
flex-direction: row;
height: 500px;
border: 1px solid black;
}
.property-editor {
border: 1px red solid;
min-height: 500px;
}
.render-area {
height: 500px;
overflow-y: auto;
border: 1px solid black;
}
.test-area {
/* 测试区域样式 */
}
</style>

2
src/components/NestedFunction.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<ul class="drag-area" ref="el" style="margin: 0;"> <ul class="drag-area" ref="el" style="margin: 0;">
<li v-for="el in modelValue" :key="el.name"> <li v-for="el in modelValue" :key="el.name">
<div style="width: 200px;border: 1px solid red;"> <div style="min-width: fit-content;border: 1px solid red;">
<p>{{ el.name }}:{{ el.id }}</p> <p>{{ el.name }}:{{ el.id }}</p>
</div> </div>
<nested-function v-model="el.children" /> <nested-function v-model="el.children" />