vue-super-flow的使用

Vue-super-flow 是基于vue 开发的一款生成、预览流程图的组件。使用者可以根据不同的需求对图、节点、连线进行细致的控制。

一、安装

npm install vue-super-flow

由于vue-super-flow使用的是element-ui进行构建，所以如果项目中没有安装element-ui的话，还需要进行安装：element-ui的安装使用步骤

二、引用（选择其中一种方式即可）
①全局引用：在main.js文件中添加

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

Vue.use(SuperFlow)

②局部引用：在要用到vue-super-flow组件的vue文件中添加

三、示例
图一：

图二：

示例图中，左侧是流程图可选择的node类型，包括开始节点、过程节点、条件节点和结束节点；中间是流程图展示区域；右侧是link样式的设置，包括连线的颜色、鼠标放上去时连线的颜色、文本的颜色、鼠标放上去时文本的颜色、文本字体的相关设置、文本背景颜色、连线是否是点线的、点线的点长度和空隙长度设置。
上面示例与官网示例相比，除了布局上的改变，还设置了nodeList和linkList，即首次加载时页面上就会显示nodeList和linkList这两个数组预设构成的流程图(图一)，除此之外，也还可以像官网示例一样拖拽绘制流程图(图二)。
完整代码：

精简版：