第五篇：VUE使用 leader-line 画各样式线，主要用于连接 DOM 节点，关系图等

第五篇：VUE使用 leader-line 画各样式线，主要用于连接 DOM 节点，关系图等

这篇博客主要是记录下 leader-line 的简单使用，在实际开发中，还挺使用。

1 2 3 4 是4个 div, 大致效果 如下：

比如个人在工作中开发的一个页面（抱歉，公司项目不便于放源码，只能放一个效果图，就是使用 leader-line 连接 DOM 节点实现的）

更丰富的配置可到官方文档查看：[leader-line文档](https://anseki.github.io/leader-line/)

1. npm 安装 leader-line

npm install leader-line --save

2. 引用的方法如下

import LeaderLine from 'leader-line'

3. 注意：还需要安装 skeleton-loader，并在 vue.config.js 里面做如下配置，不然跑起来会报错：

npm install skeleton-loader -D

// vue.config.js 添加如下配置
  configureWebpack: config => {
    let path = require('path')
    config.module.rules.push({
      test: path.resolve(__dirname, 'node_modules/leader-line/'),
      use: [
        {
          loader: 'skeleton-loader',
          options: {
            procedure: content => `${content}export default LeaderLine`
          }
        }
      ]
    })
  }

4. 上述效果的简易效果主要的代码

let startEle = document.getElementById('block-one')
let endEle = document.getElementById('block-three')
this.lineContainer = new LeaderLine(startEle,endEle,{})
let showEffectName = 'draw'
      // 动画参数
let animOptions = {
   duration: 1000, //持续时长
   timing: 'ease-in' // 动画函数
}
this.lineContainer.show(showEffectName, animOptions)

5.完整代码如下 demo

<template>
  <div class="line-block">
    <span>1111</span>
    <div class="one">
      <div class="block-one" id="block-one">1</div>
      <div class="block-two" id="block-two">2</div>
    </div>
    <div class="two">
      <div class="block-three" id="block-three">3</div>
      <div class="block-four" id="block-four">4</div>
    </div>
  </div>
</template>

<script>
import LeaderLine from 'leader-line'
export default {
  components: {},
  data() {
    return {
      lineContainer: null,
      lineContainer2: null,
      lineContainer3: null,
      lineContainer4: null
    }
  },
  // 注册监听
  mounted() {
    this.getLine()
    window.addEventListener('resize', this.getScroll)
  },
  // 销毁监听，防止内存泄露
  destroyed() {
    window.removeEventListener('resize', this.getScroll)
  },
  methods: {
    getLine() {
      let dom1 = document.getElementById('block-one')
      let dom2 = document.getElementById('block-two')
      let dom3 = document.getElementById('block-three')
      let dom4 = document.getElementById('block-four')
      let styleOption = {
        color: 'blue', // 指引线颜色
        endPlug: '', // 指引线结束点的样式 hand,disc
        size: 2, // 线条尺寸
        startSocket: 'bottom', //在指引线开始的地方从元素左侧开始
        endSocket: 'top', //在指引线开始的地方从元素右侧结束
        // hide: true, // 绘制时隐藏，默认为false，在初始化时可能会出现闪烁的线条
        startPlugColor: '#ff3792', // 渐变色开始色
        endPlugColor: '#fff386', // 渐变色结束色
        gradient: true, // 使用渐变色
        outLineColor: 'blue',
        path: 'straight', // straight,arc,fluid,magnet,grid
        dash: {
          // 虚线样式
          animation: true // 让线条滚动起来
        },
        hide: true
      }
      this.lineContainer = new LeaderLine(
        LeaderLine.mouseHoverAnchor(dom1),
        dom3,
        styleOption
      )
      this.lineContainer2 = new LeaderLine(
        LeaderLine.mouseHoverAnchor(dom1),
        dom4,
        styleOption
      )
      this.lineContainer3 = new LeaderLine(dom2, dom4, styleOption)
      this.lineContainer4 = new LeaderLine(dom2, dom3, styleOption)
      /** 显示效果
       *  draw 绘制线条
       *  fade 淡入
       *  none 无效果，即直接显示
       */
      let showEffectName = 'draw'
      // 动画参数
      let animOptions = {
        duration: 1000, //持续时长
        timing: 'ease-in' // 动画函数
      }
      this.lineContainer.show(showEffectName, animOptions)
      this.lineContainer2.show(showEffectName, animOptions)
      this.lineContainer3.show(showEffectName, animOptions)
      this.lineContainer4.show(showEffectName, animOptions)
      this.lineContainer.position()
      this.lineContainer2.position()
      this.lineContainer3.position()
      this.lineContainer4.position()
    }
  }
}
</script>

<style lang="scss" scoped>
.line-block {
  height: 90vh;
  .one {
    display: flex;
    justify-content: space-around;
    // height: 100px;
  }
  .two {
    margin-top: 100px;
    display: flex;
    justify-content: space-around;
  }
  .iframe-block {
    margin-top: 50px;
  }
  .target {
    display: inline-block;
    background-color: #9ee7ea;
    padding: 12px;
  }

  .block-one {
    border: 1px solid blue;
    padding: 10px;
  }

  .block-two {
    border: 1px solid blue;
    padding: 10px;
  }
  .block-three {
    border: 1px solid blue;
    padding: 10px;
  }
  .block-four {
    border: 1px solid blue;
    padding: 10px;
  }
}
</style>

6. 一起学习一起进步，加油come on