vue基于leader-line绘制流水线流程图

实现的效果

依赖版本

 "leader-line": "^1.0.7",
 "anim-event": "^1.0.17",

leader-line

具体的api和用法请查阅官方文档 leader-line

流程图分解和数据结构分析

流程图分解

想要将流程图组价封装成一个组件，传递数据自动绘制出流程图，从图中我们可以看出这个结构很像一个树状结构，只不过是像右的树状结构，树节点如下图中画红线所示：

每一个框代表着一个树中的节点，

对应数据结构

list: [
  {
   
      name: "scm-applicable-check1",
      nickname: "触发预处理",
      steps: ['check'], 
      children: [
        {
   
          name: "fetch-code1",
          nickname: "拉取代码",
          steps: ['clone', 'cache'],
          children: [
            {
   
              name: "scan-code1",
              nickname: "代码静态扫描",
              steps: ['uncache', 'sonar-properties-create', 'sonar-scan', 'collect-result'],
              children: [
                {
   
                  name: "bake-image1",
                  nickname: "镜像制作(linux/AMD64)",
                  steps: ['uncache', 'build-and-push', 'write-url'],
                },
                {
   
                  name: "bake-image2",
                  nickname: "镜像制作(linux/AMD64)",
                  steps: ['uncache', 'build-and-push', 'write-url'],
                },
              ]
            }
          ]
        },
      ]
    }
  ],

steps 表示每个树节点中的步骤数

那么怎么去画出这个结构呢，想到树状结构我们很容易想到递归组件，我们可以先写出每个树节点的布局

<template>
// 根元素
  <div class="nimei">
  	// 循环生成多少个流程图
      <div class="yaer" v-for="item in list" :key="item.name">
     // 树节点---start
        <span class="item">
          <ul :id="item.name">
            <li v-for="(s) in item.steps" :key="s">
              <div class="step-item">
                <gs-popover>
                  <ul>
                    <li>查看日志</li>
                    <li>重新执行</li>
                    <li>取消执行</li>
                  </ul>
                  
                  <div style="padding: 0 10px" slot='reference' :id="item.name+'-'+s">
                    <spa