从零搭建低代码平台(九)实现编辑区的初始化功能

从零搭建低代码平台(九)实现编辑区的初始化功能,第1张

目录

大体介绍

具体思路

部分代码实现

预期效果​编辑


大体介绍

在进行组件移动的同时,可能会出现组件移动出错或者是更改组件的zIndex层的问题,只靠预览区已经没有办法进行实现了,所以我们引入了编辑区,这样的话,我们就可以实现重做、撤销、导入、导出、清空、删除等一系列的功能。

具体思路

我起初打算是在编辑区添加一系列的按钮来实现对组件的所有控制 *** 作,添加的功能按钮主要包括

撤销:当移动或者引入组件发生错误的时候能够实现回溯的效果。

重做:当撤销的 *** 作发生错误的时候能过实现撤销“撤销”的效果

导出:最终引入的组件包括它的位置、样式等通过json数据的形式进行传输出来

导入:通过导入json语句来实现引入组件位置、样式等一系列的 *** 作。

预览:通过预览来实现就组件功能的展示功能,包括组件的跳转、d出事件。

清空:通过清空可以实现对当前画布中的组件的清空功能。

删除:通过选定一个组件,点击删除按钮,这样就可以实现删除指定的组件。

置顶:实现将组件的zIndex置于最高层。

置底:实现将组件的zIndex置于最低层。

锁定:通过选定一个组件,对这个组件进行锁定的功能(在画布上不能进行拖拽的功能)。

解锁:就是对锁定的组件进行解锁的功能。、

组合:通过选定一系列的组件,将这些组件进行组合,从而实现合并成为一个组件。

拆分:就是对已经组合的组件进行拆分的 *** 作,这样就可以将合并的组件分开。

部分代码实现

                {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}
                        
                    }
                })}

            
预期效果

 大体就暂时实现这部分功能,这样的话,对组件的编辑功能差不错就可以全部覆盖了,当然这一个篇文章只是讲述了要实现的功能,具体实现的话,我会在后面的文章中具体呈现出来。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1322953.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-06-12
下一篇 2022-06-12

发表评论

登录后才能评论

评论列表(0条)

保存