低代码--节点激活状态与节点删除

作者: 习惯水文的前端苏 | 来源:发表于2022-04-16 11:21 被阅读0次

$\bullet$ 前言

前些章节我们已经实现了schame的生成以及拖拽到画布的功能，但是这就像一场忘记带橡皮差的考试，万一写错了，不能把错误部分擦去的话，我想我会很难受的

$\bullet$ 分析

$\alpha$ 由于每一个物料组件都可以被删除，所以考虑做成一个公共的高阶组件专门来负责组件激活时的样式和提供删除功能

$\beta$ 当删除被调用时，去遍历schame定位到组件对应的节点并进行删除操作，同时全局应当只有一个被激活的组件

$\bullet$ 实现

$\ast$ 为每一个物料组件添加删除按钮

在渲染引擎拉取到物料组件后包一层如下高阶组件

$\ast$ 设置物料组件的默认样式

由于默认是百分百，所以一行就只能放置一个，但是像一些筛选啊之类的肯定是并排的，这里挑选180作为临界值，默认以物料组件的宽度设置高阶，超出了就设置为180，这里只是做一个基础调整，后续肯定还需要通过配置面板做进一步调整

$\ast$ 设置全局唯一激活状态

这里我意淫过很多，我想过去为schame添加一个active标记，每次去遍历schame修改激活状态并交由渲染引擎重新渲染，显然这样的开销比较大，而且对于后续的撤销和历史功能不友好，故考虑在全局维护一个队列，记录每一个操作过得组件，并提供update函数做状态更新

$\ast$ 点击删除按钮后从schame中删除对应节点

我们通过eventBus或者provider+inject将根组件中的删除方法导入到高阶组件中，并在点击行为发生时调用执行即可（这里很奇怪，重置状态会不生效，必须放置在$nextTick且在延时函数中才行，what fuck？）

递归删除（删除时不打算连schame的根节点都删掉，没啥实际性的意义）

可输入类组件无法触发click事件，可以将该行为绑定到focus上，并利用事件总线eventBus来通信

网友评论

本文标题：低代码--节点激活状态与节点删除

本文链接：https://www.haomeiwen.com/subject/ruhbdrtx.html

低代码--节点激活状态与节点删除