vue flow流程图插件的使用以及封装

1、vue flow是一个比较新的流程插件，亲测用着还算顺手，只是需要自己多阅读官网文档。

2、下载vue flow插件

npm i --save @vue-flow/core

3、已封装好的组件，比较简单，请自行阅读

<template>
  <div style="width: 100%; height: 100%">
    <VueFlow
      :nodes="nodes"
      :edges="edges"
      @node-click="onNodeClick"
      fit-view-on-init
    >
      <!-- 自定义节点插槽 -->
      <template #node-custom="nodeProps">
        <div class="node_bar">
          <div>{{ nodeProps.data.label }}</div>
          <div style="margin-top: 5px">{{ nodeProps.data.value }} {{ nodeProps.data.dw }}</div>
        </div>
       
      </template>
      <!-- <template #edge-button="buttonEdgeProps">
        <div>{{'123'}}</div>
      </template> -->
      <template #edge-custom="customEdgeProps">
        <div>{{'123'}}</div>
      </template>
    </VueFlow>
  </div>
</template>
<script>
import { Position, VueFlow, useVueFlow  } from "@vue-flow/core"; 
export default {
  components: {
    VueFlow,
  },
  data() {
    return {
      // 节点数据
      nodes: [
        // 默认节点，可以省略`type:'Default'`
        {
          id: "1",
          type: "custom",
          data: { label: "费率", value: 0.2,dw:"%" },
          position: { x: 480, y: 0 },
          style: {
            width: "140px",
            height: "60px",
            padding: "5px",
            fontSize: "13px",
            border: "2px solid #10D27A",
            borderRadius: "6px",
          },
        },
        {
          id: "2",
          type: "custom",
          data: { label: "收入", value: 278.16,dw:"亿元" },
          position: { x: 480, y: 100 },
          // sourcePosition: Position.Right,
          style: {
            width: "140px",
            height: "60px",
            padding: "5px",
            fontSize: "13px",
            border: "2px solid #F1881C",
            borderRadius: "6px",
          },
        },
        {
          id: "3",
          type: "custom",
          data: { label: "成本", value: 515.99,dw:"亿元" },
          position: { x: 480, y: 250 },
          style: {
            width: "140px",
            height: "60px",
            padding: "5px",
            fontSize: "13px",
            border: "2px solid #81D85D",
            borderRadius: "6px",
          },
        },
        {
          id: "4",
          type: "custom",
          data: { label: "数据咨询费", value: 0.1,dw:"%" },
          position: { x: 360, y: 400 },
          style: {
            width: "140px",
            height: "60px",
            padding: "5px",
            fontSize: "13px",
            border: "2px solid #0F6DC6",
            borderRadius: "6px",
          },
        },  {
          id: "5",
          type: "custom",
          data: { label: "平台使用费", value: 0.25,dw:"%" },
          position: { x: 600, y: 400 },
          style: {
            width: "140px",
            height: "60px",
            padding: "5px",
            fontSize: "13px",
            border: "2px solid #0F6DC6",
            borderRadius: "6px",
          },
        },
      ],
      // 节点连线(就是哪个节点到那个节点)
      edges: [
        {
          id: "e1-1",
          source: "1",
          target: "2",
          animated: true, 
        },
        {
          id: "e1-2",
          source: "2",
          target: "3",
          animated: true, 
          label: '亏损（273.83）',
          labelBgStyle: { fill: '#409eff'},
          labelStyle: { fill: '#fff' },
        },
        {
          id: "e1-3",
          type: 'smoothstep',
          source: "3",
          target: "4",
          animated: false,
        }, {
          id: "e1-4",
          type: 'smoothstep',
          source: "3",
          target: "5",
          animated: false,
        },
      ],
    };
  },
  created() {},
  mounted() {},
  methods: {
    // 节点点击事件
    onNodeClick(node) {
      console.log("Node clicked:", node);
    },
  },
};
</script>
<style>
/* 这些是vue-flow的必备样式 */
@import "@vue-flow/core/dist/style.css";
/* 这包含默认主题，这些是可选样式 */
@import "@vue-flow/core/dist/theme-default.css";
</style>
<style lang="scss" scoped>
.node_bar{
  width: 100%;
  height: 100%;
  &>div{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>