目录
大致介绍
实现功能
核心代码
Low-code低代码开发平台
大致介绍低代码开发平台（LCDP）是无需编码（0代码）或通过少量代码就可以快速生成应用程序的开发平台。通过可视化进行应用程序开发的方法（参考可视编程语言），使具有不同经验水平的开发人员可以通过图形化的用户界面，使用拖拽组件和模型驱动的逻辑来创建网页和移动应用程序。
主要技术栈是Vue3+Typescript，使用了scene-UI组件库中的15个基础组件、3个场景组件。
实现功能主要实现了：
1）组件的可视化以及可编辑化
2）改变全局属性：撤销、重做、导入、导出、预览、清空、复制、剪切、粘贴等等
3）改变组件的外部属性：添加、拖拽、删除、锁定、解锁、上移（z-Index）、下移（z-Index）、置顶（z-Index）、置底（z-Index）、组合、拆分等等
4）组件的内部属性（以按钮组件为例）：X和Y坐标（在画布中的位置）、宽、高、颜色、背景色、边框颜色、边框宽度、边框半径、字体大小、字体粗细、行高、字间距、透明度、内容等等
5）组件的事件（以按钮为例）：跳转事件、alter事件等等
核心代码import {computed, defineComponent, inject, onMounted, reactive, ref} from "vue";
import './editor.scss'
import '../assets/iconfont/iconfont.scss'
import EditorBlock from './editor-block'
import Attribute from './attr-block'
import EventList from './event-block'
import previewDemo from "@/packages/previewDemo";
import deepcopy from "deepcopy";
import {useMenuDragger} from "@/packages/useMenuDragger";
import {useFocus} from "@/packages/useFocus";
import {left} from "core-js/internals/array-reduce";
import {useBlockDragger} from "@/packages/useBlockDragger";
import {useCommand} from "@/packages/useCommand";
import Grid from "../utils/Grid"
import {useRightClick} from "@/packages/useRightClick";
import RightClick from "@/packages/rightClick"
import {ElButton, ElTabPane, ElTabs} from 'element-plus'
export default defineComponent({
props: {
modelValue: {type: Object}
},
components: {
Grid,
},
emits: ['update:modelValue'],
setup(props, ctx) {
// 设置计算属性，以便于实现数据的双向绑定
const data = computed({
get() {
return props.modelValue
},
set(newValue) {
ctx.emit('update:modelValue', deepcopy(newValue))
}
})
const state = {
current: -1,
queue: [],
commands: {},
commandArray: [],
destroyArray: []
}
// 设置复制和剪切的内容容器，用来实现复制粘贴功能
const copyContent = reactive({
blockRightClickBox: false,
containerRightClickBox: false,
unlockRightClickBox: false,
copyContent: [],
startX: null,
startY: null,
data: data.value,
state: state
});
// const copyContent = computed({
// get() {
// return copyContentReal.value
// },
// set(newValue) {
// ctx.emit('update:copyContent', deepcopy(newValue))
// }
// })
// 设置计算属性，用来改变和渲染画布的大小
const containerStyles = computed(() => ({
width: data.value.container.width + 'px',
height: data.value.container.height + 'px',
}))
const config = inject('config')
// 实现菜单拖拽功能
const containerRef = ref(null)
const {dragstart, dragend} = useMenuDragger(containerRef, data);
// 实现获取焦点
let {blockMousedown, focusData, containerMousedown, lastSelectBlock} = useFocus(data, copyContent, (e) => {
mousedown(e)
// console.log(JSON.stringify(attrs_style.value.attribute))
// console.log(JSON.stringify(attrs_style.value.block))
});
// 实现鼠标右键点击的 *** 作
let {containerRightClick, blockRightClick} = useRightClick(data, copyContent)
// 实现组件拖拽功能
let {mousedown, markLine} = useBlockDragger(focusData, lastSelectBlock);
const {commands} = useCommand(data, state);
const buttons = [
{label: '撤销', handler: () => commands.undo()},
{label: '重做', handler: () => commands.redo()},
{label: '导出', handler: () => commands.output()},
{label: '保存', handler: () => commands.save()},
{label: '预览', handler: () => commands.preview()},
{label: '清空', handler: () => commands.clear()},
{label: '删除', handler: () => commands.remove()},
{label: '置顶', handler: () => commands.top()},
{label: '置底', handler: () => commands.bottom()},
{label: '锁定', handler: () => commands.lock()},
{label: '解锁', handler: () => commands.unlock()},
{label: '组合', handler: () => commands.combine()},
{label: '拆分', handler: () => commands.divide()},
]
return () =>
{/*根据注册列表 渲染对应的内容*/}
{config.componentList.map((component, index) => {
if (index <= 11) {
return (
dragstart(e, component)}
onDragend={dragend}
>
{component.label}
{component.preview()}
)
}
})}
{config.componentList.map((component, index) => {
if (index > 11) {
return (
dragstart(e, component)}
onDragend={dragend}
>
{component.label}
{component.preview()}
)
}
})}
{buttons.map((btn, index) => {
// console.log(JSON.stringify(data.value))
let deleteDisabled = true
let topDisabled = true
let bottomDisabled = true
let lockDisabled = true
let unlockDisabled = true
data.value.blocks.forEach((block, idx) => {
if (block.focus === true && block.lock === false) {
deleteDisabled = false
topDisabled = false
bottomDisabled = false
lockDisabled = false
}
if (block.focus === true && block.lock === true) {
unlockDisabled = false
}
})
// console.log(index)
if (index === 6) {
// 删除
return
{btn.label}
} else if (index === 7) {
return
{btn.label}
} else if (index === 8) {
return
{btn.label}
} else if (index === 9) {
return
{btn.label}
} else if (index === 10) {
return
{btn.label}
} else if (index === 11) {
return
{btn.label}
} else if (index === 12) {
return
{btn.label}
} else {
return
{btn.label}
}
})}
{/*产生滚动条*/}
{/*产生组件属性表单*/}
暂未实现
{/*产生滚动条*/}
{/*产生内容区域*/}
{/*网格线*/}
{
(data.value.blocks.map((block, index) => {
// console.log(index)
return e.target.className === 'editor-block' || e.target.className === 'editor-block editor-block-focus' || e.target.className === 'editor-block iconfont icon-suo' ? blockMousedown(e, block, index) : ''}
onmouseover={(e) => e.target.className === 'editor-block' || e.target.className === 'editor-block editor-block-focus' || e.target.className === 'editor-block iconfont icon-suo' ? e.target.style.cursor = block.moveSign : ''}
// onmouseover={(e) => e.target.children.length === 0 ? '' : e.target.children[0].style.cursor ='move'}
// onmouseover={(e) => console.log(e.target.className)}
oncontextmenu={(e) => blockRightClick(e, block)}
/>
}))
}
{markLine.x !== null && {left: markLine.x + 'px'}}/>}
{markLine.y !== null && {top: markLine.y + 'px'}}/>}
}
})
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）