前言

提供一个黑盒子的载体，通过暴露方法，和属性，实现对流程图的操作

install

npm i yz-flow --save-dev

属性

| 参数 | 说明 | 类型 | 可选值 | 默认值 | |---------- |-------------- |---------- |-------------------------------- |-------- | | menueList | 左侧显示的菜单栏 | Array | 无 | 无 | | readerOnly | 是否为只读 | Boolean | true,false | false| | canZoom | 是否缩放 | Boolean | true,false | false | | loadComplete | 首次加载数据是否加载完毕 | Boolean | true,false | false | | nodeList | 节点数据 | Array | 无 | 无 | | lineList | 线的数据 | Array | 无 | 无 | | currentElement | 当前操作的节点数据 | Object | {} | {} | | dataFormat | 定义数据格式 | Object | {} | default | | visableEditeLine | 父级监听该值，判断是否编辑当前的线 | true,false | false | false | | visableEditeNode | 父级监听该值，判断是否编辑当前的节点 | true,false | false | false | | visableAuto | 父级监听该值，判断是否编辑自动表单 | true,false | false | false |

事件

| 事件 | 说明 | 参数值 | |---------- |-------------- |---------- | | addNode | 添加节点 | params, callback | | changeNode | 改变该节点 | params | | connectionLine | 节点连线 | params, callback | | delConnect | 删除连线 | lineId, callback | | delNode | 删除节点 | nodeId, callback |

属性 详细信息

• menueList 左侧显示的菜单栏 type Array

• readerOnly 是否为只读 默认 false type Boolean

• canZoom 是否支持缩放 默认 false type Boolean

• loadComplete 数据是否加载完毕 type Boolean

• nodeList 节点数据 type Array

• lineList 连接线数据 type Array

• currentElement 当前操作节点的数据 type Object

• 右击菜单每个功能的暴出的属性 type Boolean

  • visableEditeLine
  • visableEditeNode
  • visableAuto

事件 格式

• addNode addNode (params, callback) = >{ callback(接口返回节点的数据) }

• changeNode addNode (params) = >{ }

• connectionLine (params, callback) = >{ callback(接口返回的数据) }

• delConnect (lineId, callback)= >{ callback(true|false)}

• delNode (nodeId, callback)= >{ callback(true|false)}

注意渲染数据必须时同步 先获取节点数据和线的数据再将 loadComplete 属性设置为true ，再渲染视图

自定义该组件样式的方案