0.3.2 • Published 7 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 |