vue super flow 流程图使用总结

最新推荐文章于 2024-08-08 08:30:16 发布

小王几pl

最新推荐文章于 2024-08-08 08:30:16 发布

阅读量7.8k

点赞数 7

分类专栏： vue 插件文章标签：前端 vue javascript

本文链接：https://blog.csdn.net/weixin_50336155/article/details/122478171

版权

本文总结了在Vue项目中使用vue super flow插件进行流程图开发的经验。内容包括插件的导入方法、配置细节，如全局和局部引用、标签配置、画布及节点右键菜单配置。还探讨了通过代码创建和删除连线、修改节点内容和样式、获取鼠标坐标、绑定快捷键以及设置画布大小等操作。由于插件存在一些限制，如画布大小控制可能导致性能问题，作者期待更多解决方案或补充。

摘要由CSDN通过智能技术生成

在工作中接了一个使用到流程图的项目用的 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	() =>