vue-flowchart使用方法

Vue-flowchart是一款基于Vue.js框架的流程图插件，可用于快速构建流程图。使用方法如下：

1. 安装vue-flowchart

在命令行中输入以下命令安装vue-flowchart：

npm install vue-flowchart --save

2. 引入vue-flowchart

在需要使用vue-flowchart的组件中引入vue-flowchart：

import VueFlowchart from 'vue-flowchart';

3. 使用vue-flowchart

在Vue组件中使用vue-flowchart：

<template>
  <div>
    <vue-flowchart :data="data"/>
  </div>
</template>

<script>
import VueFlowchart from 'vue-flowchart';

export default {
  components: {
    VueFlowchart
  },
  data() {
    return {
      data: {
        nodes: [
          {
            id: '1',
            label: '开始',
            x: 100,
            y: 100,
            type: 'start'
          },
          {
            id: '2',
            label: '节点1',
            x: 250,
            y: 100,
            type: 'process'
          },
          {
            id: '3',
            label: '节点2',
            x: 400,
            y: 100,
            type: 'process'
          },
          {
            id: '4',
            label: '结束',
            x: 550,
            y: 100,
            type: 'end'
          }
        ],
        edges: [
          {
            id: '1',
            from: '1',
            to: '2',
            type: 'line'
          },
          {
            id: '2',
            from: '2',
            to: '3',
            type: 'curve'
          },
          {
            id: '3',
            from: '3',
            to: '4',
            type: 'line'
          }
        ]
      }
    }
  }
}
</script>

上述代码中，定义了一个流程图数据对象data，包含了节点和连线的信息。其中，节点有以下属性：

- id：节点唯一标识符
- label：节点显示内容
- x：节点在流程图中的横坐标
- y：节点在流程图中的纵坐标
- type：节点类型，可选值为start（开始节点）、process（处理节点）和end（结束节点）

连线有以下属性：

- id：连线唯一标识符
- from：连线起始节点的id
- to：连线终止节点的id
- type：连线类型，可选值为line（直线）和curve（曲线）

4. 自定义节点和连线样式

通过在data中定义节点和连线的type属性，可以为不同类型的节点和连线指定不同的样式。例如：

<template>
  <div>
    <vue-flowchart :data="data" :options="options"/>
  </div>
</template>

<script>
import VueFlowchart from 'vue-flowchart';

export default {
  components: {
    VueFlowchart
  },
  data() {
    return {
      data: {
        nodes: [
          {
            id: '1',
            label: '开始',
            x: 100,
            y: 100,
            type: 'start'
          },
          {
            id: '2',
            label: '节点1',
            x: 250,
            y: 100,
            type: 'process'
          },
          {
            id: '3',
            label: '节点2',
            x: 400,
            y: 100,
            type: 'process'
          },
          {
            id: '4',
            label: '结束',
            x: 550,
            y: 100,
            type: 'end'
          }
        ],
        edges: [
          {
            id: '1',
            from: '1',
            to: '2',
            type: 'line'
          },
          {
            id: '2',
            from: '2',
            to: '3',
            type: 'curve'
          },
          {
            id: '3',
            from: '3',
            to: '4',
            type: 'line'
          }
        ]
      },
      options: {
        // 自定义节点样式
        nodeTypes: {
          start: {
            component: 'start-node',
            style: {
              fill: '#f5f5f5',
              stroke: '#333333',
              'stroke-width': 2
            }
          },
          process: {
            component: 'process-node',
            style: {
              fill: '#f5f5f5',
              stroke: '#333333',
              'stroke-width': 2
            }
          },
          end: {
            component: 'end-node',
            style: {
              fill: '#f5f5f5',
              stroke: '#333333',
              'stroke-width': 2
            }
          }
        },
        // 自定义连线样式
        edgeTypes: {
          line: {
            component: 'line-edge',
            style: {
              stroke: '#333333',
              'stroke-width': 2
            }
          },
          curve: {
            component: 'curve-edge',
            style: {
              stroke: '#333333',
              'stroke-width': 2
            }
          }
        }
      }
    }
  }
}
</script>

上述代码中，通过在options中定义nodeTypes和edgeTypes对象，为不同类型的节点和连线指定了不同的样式。其中，component属性指定了节点和连线的自定义组件名称，style属性指定了节点和连线的样式。自定义组件可以在定义Vue组件时进行配置。

5. 自定义节点和连线组件

在使用vue-flowchart时，可以通过自定义节点和连线组件来实现自定义样式和功能。例如，定义一个自定义开始节点组件：

<template>
  <g>
    <circle :cx="x" :cy="y" r="30" :style="style" />
    <text :x="x" :y="y+5" text-anchor="middle" font-size="20">{{label}}</text>
  </g>
</template>

<script>
export default {
  name: 'start-node',
  props: ['id', 'label', 'x', 'y', 'style']
}
</script>

上述代码中，定义了一个SVG组件，包含了一个圆形和一个文本元素。通过props属性接收节点的属性信息，并根据属性信息渲染节点内容。

在Vue组件中引入自定义节点和连线组件：

import StartNode from './StartNode.vue';
import ProcessNode from './ProcessNode.vue';
import EndNode from './EndNode.vue';
import LineEdge from './LineEdge.vue';
import CurveEdge from './CurveEdge.vue';

export default {
  components: {
    VueFlowchart,
    StartNode,
    ProcessNode,
    EndNode,
    LineEdge,
    CurveEdge
  },
  // ...
}

上述代码中，定义了五个自定义组件，分别为开始节点组件StartNode、处理节点组件ProcessNode、结束节点组件EndNode、直线连线组件LineEdge和曲线连线组件CurveEdge，并在Vue组件中引入。

6. 更多配置选项

除了上述介绍的options选项外，vue-flowchart还支持其他配置选项，例如：

- zoomable：是否允许通过鼠标滚轮缩放流程图，默认值为true
- draggable：是否允许拖拽节点和连线，默认值为true
- selectMode：选择模式，可选值为node（节点选择）和edge（连线选择），默认值为node
- allowMultiSelect：是否允许多选，默认值为true
- nodeMenu：节点右键菜单配置
- edgeMenu：连线右键菜单配置

具体配置方法可参考vue-flowchart的文档。