【前端】跟着maxkb学习流程图画法
文章目录
- 背景
- 1. 选定学习对象-maxkb应用逻辑编排
- 2. 确定实现框架
- 3. 关键逻辑:查看app-node.js
- 4. 学习开始节点绘制
背景
看看前端如何绘制流程图,界面好看点。
1. 选定学习对象-maxkb应用逻辑编排
2. 确定实现框架
maxkb采用vue3 + ts + logicflow2实现上面的界面,我们选择vue2 + js跟着学。
3. 关键逻辑:查看app-node.js
import { HtmlResize } from '@logicflow/extension'
app-node.js是maxkb的基础节点, 所有的节点基本都是由此扩展而来,以开始节点为例,其定义的js为:
import StartNodeVue from './index.vue'
import { AppNode, AppNodeModel } from '@/workflow/common/app-node'
class StartNode extends AppNode {constructor (props) {super(props, StartNodeVue)}
}
export default {type: 'start-node',model: AppNodeModel,view: StartNode
}
而配置开始节点的属性字段、通过表单录入的逻辑则是在startNode/index.vue中编写。
4. 学习开始节点绘制
我们绘制一个demo级别的开始节点,通过logicflow2
可以看到很简陋,那么我们尝试自定义节点样式