vue super flow 流程图使用总结

在工作中接了一个使用到流程图的项目 用的 vue super flow 插件做的流程图,但是插件的文档没有使用说明,就只能在git的demo里面看加上摸索出来的一些用到的方法,要是有不对的不要喷我

导入方法

官方文档里面有我就直接搬一部分过来吧

1. 安装

// npm 装包
npm install vue-super-flow

2. 引用

全局引用

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

Vue.use(SuperFlow)

局部引用

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

配置

demo代码 Git地址

标签

<template>
  <div class="super-flow-base-demo">
    <super-flow
      ref="superFlow"
      :node-list="nodeList" // 所有节点信息
      :link-list="linkList" // 所有连线信息
      :origin="origin" // 源点
      :graph-menu="graphMenuList" // 画布右键菜单配置
      :node-menu="nodeMenuList" // 节点右键菜单配置
      :link-menu="linkMenuList" // 连线右键菜单配置
      :enter-intercept="enterIntercept"
      :output-intercept="outputIntercept" // 渲染节点/鼠标移入节点的时候执行
      :link-desc="linkDesc"> // 渲染连线/鼠标移入连线的时候执行
      <template v-slot:node="{meta}">
        <div :class="`flow-node flow-node-${meta.prop}`">
          <header>
            {
   {
   meta.name}}
          </header>
          <section>
            {
   {
   meta.desc}}
          </section>
        </div>
      </template>
    </super-flow>
  </div>
</template>

这个把官方的参数表格直接搬过来了

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