vue-dm-xflow

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