Vue-super-flow is a quick and convenient Vue plug-in to realize flow chart.
``npm
npm install @freecoder/codevue-super-flow
yarn add @freecoder/codevue-super-flow
`
`js
import SuperFlow from '@freecoder/codevue-super-flow'
import '@freecoder/vue-super-flow/lib/index.css'
Vue.use(SuperFlow)
`
|属性 |类型 |默认值 |描述 |
|---- | ---- |---- |---- |
|draggable |Boolean |true | 是否开启节点拖拽 |Boolean
|linkAddable | |true | 是否开启快捷创建 link |Boolean
|linkEditable | |true | link 是否可编辑 |Boolean
|hasMarkLine | |true | 是否开启拖拽辅助线 |String
|markLineColor | |#55abfc | 辅助线颜色 |Array
|origin | |[0, 0] | graph 的二维坐标系原点 |Array
|nodeList | |[] | 初始化节点列表 |Array
|linkList | |[] | 初始化连线列表 |Array
|graphMenu | |[] | graph 的右键菜单列表配置 |Array
|nodeMenu | |[] | node 右键菜单列表配置 |Array
|linkMenu | |[] | link 右键菜单配置 |Function
|enterIntercept | |() => true | 创建连线进入节点限制 |Function
|outputIntercept | |() => true | 节点生成连线限制函数 |Function
|linkDesc | |null | 生成 link 定制描述文字 |Function
|linkStyle | |null | 根据 link 定制样式 |Object
|linkBaseStyle | |{} | 连线默认样式配置 |
js
function linkDesc(link) {
/**
根据 link 对象的属性判断定制连线描述
*/
return link.meta ? link.meta.info : ''
}
`$3
`json5
/*
// 内置默认样式配置
{
hover: '#FF0000', // 连线 hover 时颜色
color: '#666666', // 连线颜色
textColor: '#666666', // 连线描述文字颜色
textHover: '#FF0000', // 连线 hover 时描述文字颜色
font: '14px Arial', // 连线 描述文字 font 参考 https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/font
dotted: false, // 连线 是否是虚线
lineDash: [4, 4], // 为虚线时 虚线参数 参考:https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/setLineDash
background: 'rgba(255,255,255,0.6)' // 描述文字背景
}
*/{
// ... 可选属性 参考内置默认样式 用来覆盖连线样式的默认值
}
`$3
`js
function linkStyle(link) {
/**
根据 link 对象的属性判断定制连线样式
*/
return {
// ... 可选属性 参考:linkBaseStyle
}
}
`Methods
|方法名 |说明 |参数 |
|---- | ---- |---- |
|selectAll | 选中所有进行拖拽修改
origin |---- |
|toJSON | 将 graph 对象转为普通 json 对象 |---- |
|getMouseCoordinate | 获取当前鼠标在 graph` 坐标系的坐标 |clientX, clientY |