[开源]快速高效搭建可视化拖拽平台，含事件机制、弹窗等解决方案

一、开源项目简介

dooringx-lib 是 dooringx 的基座，是移除了 dooringx 插件的可视化拖拽框架。

dooringx-lib 提供自己的一套数据流事件机制以及弹窗等解决方案，可以让你更快地自己定制开发可视化拖拽平台。

dooringx-lib 在运行时维护一套数据流，主要分为json数据部分，左侧组件部分，右侧配置项部分，快捷键部分，弹窗部分，事件与函数部分，数据源部分。

其除了提供基础的拖拽、移动、缩放、全选、旋转等功能外，还可以使用暴露的组件。如果觉得组件不够定制化，可以调整样式或者自己重新写。

二、开源协议

使用MIT开源协议

三、界面展示

✂️快照 | Screen Shots

四、功能概述

开箱即用

提供的底层能力，帮助开发者零成本上手，让所有注意力都能放组件开发与应用设计上

Typescript支持

提供良好的ts定义支持，让编写组件更加轻松

可扩展可配置

不止是组件，快捷键、事件系统、ui层面都可自行配置与扩展

五、技术选型

二次开发安装 | Installation

npm/yarn  install dooringx-lib

项目上手 | Quick Start

# 克隆项目
# 进入项目目录cd dooringx
# 安装依赖yarn install
# 启动 dooringx-libyarn start
# 启动基础示例yarn start:example
# 启动 dooringx doc 文档yarn start:doc

同步代码 | Synchronizing Code

# add upstream
# 抓取源仓库修改 master分支git fetch upstream main
# 切换分支git checkout main
# 合并远程分支git merge upstream/main

表单验证提交思路

表单验证提交有非常多的做法，因为数据全部是联通的，或者直接写个表单组件也可以。

在不使用表单组件时，简单的做法是为每个输入组件做个验证函数与提交函数。

这样是否验证就取决于用户的选取，而抛出的输入可以让用户选择放到哪，并由用户去命名变量。

在点击提交按钮时，调用所有组件的验证函数与提交函数，使其抛给上下文，再通过上下文聚合函数聚合成对象，最后可以通过发送函数发送给对应后端，从而完成整个流程。你可以在example中试下这个demo。

如果操作人员能看懂后端提供的接口文档，那么就可以让操作人员自己通过命名来拼出后端想要的字段。

如果不需要文档，那么某些值也可以在开发时写死。

另外的做法是可以专门写个提交按钮，固定了参数，以及部分规则，比如规定在页面中的所有表单都会被收集提交。

那么我们可以利用数据源，将所有表单输出内容自动提交给数据源，最后的提交按钮按数据源规定格式的key提取，发送给后端。

六、源码地址

访问一飞开源：https://code./

收录于合集 #开源项目

 151

下一篇「开源」开源的一站式云原生机器学习平台，可自由定制任务插件

确定

• 不看此公众号