vue2 使用vue-flowchart-editor

Vue 2 中使用 Vue-Flowchart-Editor 是一个将流程图绘制功能集成到 Vue.js 应用程序的过程。Vue-Flowchart-Editor 是一个基于 JavaScript 的库，它允许你在 Vue 组件中方便地创建交互式的流程图。

以下是基本步骤来在 Vue 项目中使用 Vue-Flowchart-Editor：

1. **安装依赖**：
首先，在你的 Vue 项目的 `package.json` 文件中通过 npm 或 yarn 安装库：

   npm install vue-flowchart-editor @types/vue-flowchart-editor --save

2. **引入并注册组件**：
在你的 Vue 组件中，导入 FlowchartEditor 组件，并将其添加到模板中：

   <template>
     <div>
       <flowchart-editor ref="editor" :model="flowchartData"></flowchart-editor>
     </div>
   </template>

然后在 script 标签里注入引用：

   import { FlowchartEditor } from 'vue-flowchart-editor';

   export default {
     components: {
       FlowchartEditor,
     },
     data() {
       return {
         flowchartData: {}, // 初始化一个空的对象存储流程图数据
       };
     },
   };

3. **初始化和操作**：
初始化流程图的数据模型，可以是 JSON 对象，然后处理用户的编辑操作：

   mounted() {
     this.flowchartData = {
       // 初始化你的流程图配置，例如形状、连线等
     };
   },
   
   methods: {
     onDiagramChange(data) {
       this.flowchartData = data; // 更新数据当图表变化
     },
   },

4. **样式和定制**：
如果需要自定义样式或者布局，你可以通过修改 CSS 类名或者使用 editor 的 options 属性来自定义。