0.3.2 • Published 7 months ago

vue-dm-xflow v0.3.2

Weekly downloads
-
License
-
Repository
-
Last release
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画布idString——draw-cot
view视图模式Booleantrue/falsefalse
title标题String——vue-dm-xflow
data画布数据显示Array——[]
node-data节点控件数据Array——[]
tool画布工具Arrayfullscreen, zoom, undo, redo, clear, centerfullscreen, 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节点类型,判断识别节点的出入口Stringoutput,onlyIn, inOut,condition
label节点名称String
data存放业务自定义参数, data里component参数,用于双击节点时加载指定弹窗组件示例:component:'/demo/demoDialog.vue'Object
children子节点Array
ports连接桩,可连续重复多个Arrayleft,right,top,bottom