vue流程图组件

<template>
  <div id="app">
    <flowchart :nodes="nodes" :edges="edges"></flowchart>
  </div>
</template>

<script>
import Flowchart from 'vue-flowchart-component';

export default {
  name: 'App',
  components: {
    Flowchart
  },
  data() {
    return {
      nodes: [
        { id: 1, label: '开始', x: 50, y: 50 },
        { id: 2, label: '处理', x: 200, y: 50 },
        { id: 3, label: '结束', x: 350, y: 50 }
      ],
      edges: [
        { from: 1, to: 2, label: '到处理' },
        { from: 2, to: 3, label: '到结束' }
      ]
    };
  }
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

解释说明

1. 模板部分 (<template>):

   • 使用了一个 div 容器来包裹 Flowchart 组件。
   • Flowchart 组件通过 v-bind 指令 (:) 绑定了 nodes 和 edges 数据。

2. 脚本部分 (<script>):

   • 引入了 vue-flowchart-component 库中的 Flowchart 组件。
   • 在 components 中注册了 Flowchart 组件。
   • 在 data 函数中定义了 nodes 和 edges，用于描述流程图的节点和边。每个节点包含 id, label, x, y 属性，每条边包含 from, to, label 属性。

3. 样式部分 (<style>):

   • 简单设置了页面的基本样式，包括字体、文本对齐方式、颜色和外边距。

如果你在项目中使用这个代码，请确保已经安装了 vue-flowchart-component 库。如果没有安装，可以通过以下命令进行安装：

npm install vue-flowchart-component