0.3.2 • Published 6 months ago
Npm setup
npm install vue-dm-xflow --save
Project setup
npm install
Compiles and hot-reloads for development
npm run serve
Compiles and minifies for production
npm run build
Lints and fixes files
npm run lint
Attributes
| 名称 | 说明 | 类型 | 可选值 | 默认值 |
|---|
| id | 画布id | String | —— | draw-cot |
| view | 视图模式 | Boolean | true/false | false |
| title | 标题 | String | —— | vue-dm-xflow |
| data | 画布数据显示 | Array | —— | [] |
| node-data | 节点控件数据 | Array | —— | [] |
| tool | 画布工具 | Array | fullscreen, zoom, undo, redo, clear, center | fullscreen, zoom, undo, redo, clear, center |
| area | 组件大小(宽，高) | Array | —— | '100%', '100%' |
Events
| 事件名 | 说明 | 参数 |
|---|
| node-click | 当单击选中某一个节点时的事件 | data, cell |
| node-dblclick | 当单双击某个节点时的事件 | data, cell |
| node-form-update | 点击节点，右侧区域显示属性修改功能， 执行后可对该节点的属性进行动态更新， 不设置此事件，则右侧面板不显示。 | data, cell |
Methods
| 方法名 | 说明 | 参数 |
|---|
| getGraph | 获取画布里所有节点的数据，包含元素属性 | |
| playGraph | 播放节点之间流转的动画 | |
Slot
| name | 说明 |
|---|
| globalButtons | 在顶部右侧加入一组按钮，一般用来全局业务按钮操作 |
| footerContent | 画布底部内容区域， 该区域默认200高度， 不设置插槽此区域不显示。 |
| rightContent | 画布右侧内容区域， 该区域默认300宽度， 不设置插槽此区域不显示。 |
node-data (节点tree数据)
第一级为目录，children里才是节点组件数据
| name | 说明 | 类型 | 可选值 |
|---|
| id | 节点唯一标识 | String | |
| type | 节点类型，判断识别节点的出入口 | String | output,onlyIn, inOut,condition |
| label | 节点名称 | String | |
| data | 存放业务自定义参数， data里component参数，用于双击节点时加载指定弹窗组件示例：component：'/demo/demoDialog.vue'。 | Object | |
| children | 子节点 | Array | |
| ports | 连接桩，可连续重复多个 | Array | left,right,top,bottom |