vue super flow 流程图使用总结

本文总结了在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 () =>
评论 15
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值