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 |