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文件中添加

<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>

三、示例
图一：

图二：

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

<template>
  <v-container class="loan-work-queue" grid-list-xl fluid>
    <v-row style="height: 771px;">
      <v-col cols="9">
        <div class="super-flow-demo1">
          <div class="node-container">
            <span
                class="node-item"
                v-for="(item, index) in nodeItemList"
                :key="index"
                @mousedown="evt => nodeItemMouseDown(evt, item.value)">
              {
  { item.label }}
            </span>
          </div>
          <div
            class="flow-container"
            ref="flowContainer"
            @click="flowNodeClick">
            <super-flow
              @toJSON="toJSON"
              ref="superFlow"
              :graph-menu="graphMenu"
              :node-menu="nodeMenu"
              :link-menu="linkMenu"
              :link-base-style="linkBaseStyle"
              :link-style="linkStyle"
              :link-desc="linkDesc"
              :node-list="nodeList"
              :link-list="linkList">
              <template v-slot:node="{meta}">
                <div
                  @mouseup="nodeMouseUp"
                  @click="nodeClick"
                  :class="meta.type? `flow-node-${meta.type}`: ''"
                  class="flow-node ellipsis">
                  <div class="node-content" :title="meta.name">{
  { meta.name }}</div>
                </div>
              </template>
            </super-flow>
            <v-btn
              text
              @click="saveFlow"
              color="primary"
              class="saveIcon"
              >SAVE
            </v-btn>
          </div>
        </div>
      </v-col>
      <v-col cols="3">
        <div>
          <el-form
            class="link-base-style-form"
            ref="linkBaseStyle"
            label-width="100px"
            @submit.native.prevent
            :model="linkBaseStyle">
            <h4 class="style-title">Link style customization</h4>
            <v-row>
              <v-col cols="12">
                <el-form-item label="color">
                  <el-color-picker
                    v-model="linkBaseStyle.color">
                  </el-color-picker>
                </el-form-item>
              </v-col>
              <v-col cols="12">
                <el-form-item label="hover">
                  <el-color-picker
                    v-model="linkBaseStyle.hover">
                  </el-color-picker>
                </el-form-item>
              </v-col>
              <v-col cols="12">
                <el-form-item label="textColor">
                  <el-color-picker
                    v-model="linkBaseStyle.textColor">