Vue super flow 基于vue的流程图组件

安装

npm install vue-super-flow
yran add vue-spuer-flow

全局使用

import SuperFlow from 'vue-super-flow'
import 'vue-super-flow/lib/index.css'
Vue.use(SuperFlow)

局部引用

<template>
  <super-flow></super-flow>
</template>
<script >
  import SuperFlow from 'vue-super-flow' 
  import 'vue-super-flow/lib/index.css'
  export default {
    components: {SuperFlow}   
  } 
</script>

属性

#draggable

• 类型：Boolean
• 默认值：true

是否开启节点拖拽移动坐标

#linkAddable

• 类型：Boolean
• 默认值：true

是否开启节点边缘拖拽可创建连线

#linkEditable

• 类型：Boolean
• 默认值：true

连线是否触发 hover 并调用右键菜单

#hasMarkLine

• 类型：Boolean
• 默认值：true

是否开启辅助线

#linkDesc

• 类型：Function
• 默认值：null

生成 link 定制描述文字
function linkDesc(link) { /* 根据 link 对象的属性判断定制连线描述 / return link.meta ? link.meta.info : ‘’ }

#linkStyle

• 类型：Function
• 默认值：null

根据 link 定制样式 可选属性参考：linkBaseStyle
function linkStyle(link) { /* 根据 link 对象的属性判断定制连线样式 / return { // … } }

#linkBaseStyle

• 类型：Object
• 默认值：{}

连线默认样式配置
/ // 内置默认样式配置 { hover: ‘#FF0000’, // 连线 hover 时颜色 color: ‘#666666’, // 连线颜色 textColor: ‘#666666’, // 连线描述文字颜色 textHover: ‘#FF0000’, // 连线 hover 时描述文字颜色 font: ‘14px Arial’, // 连线 描述文字 dotted: false, // 连线 是否是虚线 lineDash: [4, 4], // 为虚线时 虚线参数 background: ‘rgba(255,255,255,0.6)’ // 描述文字背景 } / { // … 可选属性 参考内置默认样式 用来覆盖连线样式的默认值 }
参考： canvas font lineDash

#markLineColor

• 类型：String
• 默认值：#55abfc

辅助节点对齐辅助线的颜色

#origin

• 类型：Array
• 默认值：[0, 0]

graph 的二维坐标系原点

#nodeList

• 类型：Array
• 默认值：[]

初始化节点列表

#linkList

• 类型：Array
• 默认值：[]

初始化连线列表

#graphMenu

• 类型：Array
• 默认值：[]

说明
graphMenu 是对 graph 的右键菜单列表配置；
根据需要定制菜单,并可通过 插槽 menuItem 来决定菜单如何渲染
查看示例

#nodeMenu

• 类型：Array
• 默认值：[]

node 右键菜单配置

#linkMenu

• 类型：Array
• 默认值：[]

link 右键菜单

#enterIntercept

• 类型：Function
• 默认值：() => true

连线进入节点限制函数 接受 boolean 返回值
查看示例

#outputIntercept

• 类型：Function
• 默认值：() => true

节点生成连线限制 接受 boolean 返回值
查看示例

#方法

#selectAll

• 参数: ``

选中所有进行拖拽修改 origin

#toJSON

• 参数: ``

将 graph 对象转为普通 json 对象并返回

#getMouseCoordinate

• 参数: clientX, clientY

获取当前鼠标在 graph 坐标系的坐标

#addNode

• 参数: options

新增节点函数

#插槽

#node

• 控制节点渲染

  #menuItem

• 控制菜单单项渲染