vue3 流程图组件

<template>
  <div>
    <flow-chart :nodes="nodes" :edges="edges" />
  </div>
</template>

<script>
import { ref } from 'vue';
import FlowChart from 'vue-flowchart-component'; // 假设这是一个第三方库，用于绘制流程图

export default {
  components: {
    FlowChart,
  },
  setup() {
    const nodes = ref([
      { id: 1, label: 'Start', x: 100, y: 100 },
      { id: 2, label: 'Process 1', x: 300, y: 100 },
      { id: 3, label: 'Decision', x: 500, y: 100 },
      { id: 4, label: 'End', x: 700, y: 100 },
    ]);

    const edges = ref([
      { from: 1, to: 2 },
      { from: 2, to: 3 },
      { from: 3, to: 4 },
    ]);

    return {
      nodes,
      edges,
    };
  },
};
</script>

<style scoped>
/* 添加一些样式以美化流程图 */
</style>

解释说明：

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

   • 使用了一个自定义的 <flow-chart> 组件来渲染流程图。
   • :nodes 和 :edges 是传递给 FlowChart 组件的属性，分别表示节点和边。

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

   • 导入了 ref 函数用于创建响应式数据。
   • 引入了 FlowChart 组件，假设它是一个第三方库（如 vue-flowchart-component）。
   • 在 setup 函数中定义了两个响应式变量 nodes 和 edges，分别表示流程图中的节点和连接线。
   • 每个节点有 id, label, x, y 属性，用于标识节点的位置和名称。
   • 每条边有 from 和 to 属性，表示连接的起始节点和结束节点。

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

   • 可以根据需要添加一些 CSS 样式来美化流程图。