前端流程编辑器,vue流程编辑器
·
继上一篇发布了vue的表单设计器(说等流程编辑器开发完之后也开源),现在流程编辑器也发布了npm包,并且项目也在git上开源了,需要的小伙伴可以看一下,如果对你有帮助的话,也帮项目点个star,是对我最大的鼓励,还是有问题,有需求可以直接在下面留言,或者加入QQ群218461534(群刚建)
这两个项目纯属个人爱好
指南
基于G6的vue流程编辑器,主要功能是在可视化图形界面画流程如,生成可保存的JSON数据,并能将JSON还原成流程图。
版本
设计原则
flow-design-tcd本着尽可能使所有流程图信息由使用者通过图形界面操作。
快速上手
1.安装vue-cli
npm install -g @vue/cli
# OR
yarn global add @vue/cli
2.创建一个项目
使用初始化项目命令
vue create myapp
3.安装flow-design-tcd
npm i flow-design-tcd --save
# OR
yarn add flow-design-tcd
4.使用flow-design-tcd
在项目main.js中
import FlowDesignTCD from 'flow-design-tcd'
import "flow-design-tcd/lib/flow-design-tcd.css"
Vue.use(FlowDesignTCD)
以上步骤便完成便可在项目中直接使用flow-design-tcd。
建议
::: warning
flow-design-tcd样式风格引用element-ui的组件库,使用过程中可搭配element使用。
flow-design-tcd中对canvas渲染出的流程图,引用蚂蚁数据可视化G6,如若开发集成本插件源码,建议学习G6
:::
更多推荐
已为社区贡献2条内容
所有评论(0)