vue2 + antvx6 实现流程图功能

最新推荐文章于 2025-09-26 09:27:22 发布

原创

最新推荐文章于 2025-09-26 09:27:22 发布 · 1.8k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#流程图

本文介绍了如何在Vue项目中使用AntVX6库构建一个可交互的思维导图组件，包括安装必要的依赖、配置节点和连接器、集成DnD拖拽功能以及实现节点内容编辑和键盘监听等特性。

导入关键包

npm install @antv/x6 --save

npm install @antv/x6-vue-shape

保存插件 (可选)

npm install --save @antv/x6-plugin-clipboard @antv/x6-plugin-history @antv/x6-plugin-keyboard @antv/x6-plugin-selection @antv/x6-plugin-snapline @antv/x6-plugin-stencil @antv/x6-plugin-transform insert-css

写好的组件直接导入即可

<template>
  <div>

    <el-container>
      <el-aside>
        <div id="stencil">
          <div>
            <div class="dnd-circle dnd-start" @mousedown="startDrag('start',$event)"></div>
            <span>开始</span>
          </div>
          <div>
            <div class="dnd-rect" @mousedown="startDrag('rect',$event)"></div>
            <span>节点1</span>
          </div>
          <div>
            <div class="dnd-polygon" @mousedown="startDrag('polygon',$event)"></div>
            <span>节点2</span>
          </div>
          <div>
            <div class="dnd-circle" @mousedown="startDrag('end',$event)"></div>
            <span>结束</span>
          </div>
        </div>
      </el-aside>
      <el-main>

        <div ref="graphContainer">

        </div>
      </el-main>
    </el-container>

    <!--  todo drawer 抽屉实现节点内容编辑  -->
    <el-drawer
      title="节点属性编辑"
      :visible.sync="drawer"
      :direction="direction"
      :before-close="handleClose">
      <el-form :data="editNode" :inline="true">
        <el-form-item label="节点名称" prop="label">
          <el-input v-model="editNode.label"></el-input>
        </el-form-item>
        <el-form-item label="节点形状" prop="shape">
          <el-select v-model="editNode.shape">
            <el-option v-for="(item,index) in shapeList" :key="item.value" :label="item.label"
                       :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-button type="primary" @click="saveNode">保存</el-button>
      </el-form>
    </el-drawer>

  </div>
</template>

<script>
import {Graph} from '@antv/x6'
import '@antv/x6-vue-shape'
// 插件 键盘监听事件
import {Keyboard} from '@antv/x6-plugin-keyboard'
// 拖拽事件
import {Dnd} from '@antv/x6-plugin-dnd'

import {Stencil} from '@antv/x6-plugin-stencil'
import {Transform} from '@antv/x6-plugin-transform'
import {Selection} from '@antv/x6-plugin-selection'
import {Snapline} from '@antv/x6-plugin-snapline'
import {Clipboard} from '@antv/x6-plugin-clipboard'
import {History} from '@antv/x6-plugin-history'
import {register} from '@antv/x6-vue-shape'
import insertCss from 'insert-css'

export default {
  name: 'MindMap',
  d

最低0.47元/天解锁文章