Need help with vue-super-flow?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

caohuatao
390 Stars 82 Forks MIT License 135 Commits 1 Opened issues

Description

Flow chart component based on Vue。vue flowchart

Services available

!
?

Need anything else?

Contributors list

No Data

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

|属性 |类型 |默认值 |描述 | |---- | ---- |---- |---- | |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

默认示例

进阶示例

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.