ez-vue-flow

Vue-super-flow is a quick and convenient Vue plug-in to realize flow chart. Demo address: https://caohuatao.github.io/demo/;


Keywords
flowChart, super flow, vue flow chart, vue 流程图, es6-javascript, flow-chart, vue
License
MIT
Install
npm install ez-vue-flow@0.0.1

Documentation

vue-super-flow

  • A flowchart editor component base on Vue.
  • Vue flowchart.
  • Vue 流程图。
  • Demo
  • docs

Installation


npm install vue-super-flow

yarn add vue-super-flow

import SuperFlow from 'vue-super-flow'
import 'vue-super-flow/lib/index.css'

Vue.use(SuperFlow)

Attributes

属性 类型 默认值 描述
relationMark String "id" 可个性化 node 的标识
startMark String "startId" 可个性化 link 的起始标识
endMark String "endId" 可个性化 link 的终点标识
draggable Boolean true 是否开启节点拖拽
linkAddable Boolean true 是否开启快捷创建 link
linkEditable Boolean true link 是否可编辑
hasMarkLine Boolean true 是否开启拖拽辅助线
markLineColor String #55abfc 辅助线颜色
origin Array [0, 0] graph 的二维坐标系原点
nodeList Array [] 初始化节点列表
linkList Array [] 初始化连线列表
graphMenu Array [] graph 的右键菜单列表配置
nodeMenu Array [] node 右键菜单列表配置
linkMenu Array [] link 右键菜单配置
enterIntercept Function () => true 创建连线进入节点限制
outputIntercept Function () => true 节点生成连线限制函数
linkDesc Function null 生成 link 定制描述文字
linkStyle Function null 根据 link 定制样式
linkBaseStyle Object {} 连线默认样式配置

linkDesc

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

linkBaseStyle

/*
// 内置默认样式配置
{
   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)'  // 描述文字背景  
}
*/

{
  // ... 可选属性 参考内置默认样式 用来覆盖连线样式的默认值
}

linkStyle

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

Methods

方法名 说明 参数
selectAll 选中所有进行拖拽修改 origin ----
toJSON graph 对象转为普通 json 对象 ----
getMouseCoordinate 获取当前鼠标在 graph 坐标系的坐标 clientX, clientY
addNode 添加节点 options

Example

默认示例

进阶示例