Vue 动态连接线

尝试了两个连线库 jsplumb 和 leadline ，其实两个库都很强大，但是基于个人使用的习惯，决定还是用 leadline ，在Vue 下我使用它的一个包装库 leader-line-vue 

 下面是上图的连接线示例代码，连接线很轻松的就实现了一个渐变效果

<template>
  <div style="width: 100%; height: 100%">
    <svg ref="bar1" class="bar" :height="50"></svg>
    <svg ref="bar2" class="bar" :height="50"></svg>
  </div>
</template>

<script>
import interact from "interactjs";
import LeaderLine from 'leader-line-vue';
export default {
  data() {
    return {
      line: null
    }
  },mounted() {
    if (this.$refs.bar1) {
      this.drowBar(this.$refs.bar1);
    }
    if (this.$refs.bar2) {
      this.drowBar(this.$refs.bar2);
    }
    this.line = LeaderLine.setLine(this.$refs.bar1,this.$refs.bar2,{ startSocket: 'right',endSocket: 'left',path: 'grid',startPlugColor: '#ff3792',endPlugColor: '#fff386',gradient: true });
  },methods: {
    drowBar(bar) {
      interact(bar).draggable({
        inertia: false,modifiers: [
          interact.modifiers.restrictRect({
            restriction: "parent",// 只能在父元素内拖动
            endOnly: true,}),],autoScroll: true,listeners: {
          move: dragMoveListener,end: (event) => {
            let target = event.target;
            let x = (parseFloat(target.getAttribute("data-x")) || 0) + event.dx;
            let y = (parseFloat(target.getAttribute("data-y")) || 0) + event.dy;
            console.log(target.x);
            target.style.webkitTransform = target.style.transform =
              "translate(" + x + "px," + y + "px)";
            target.setAttribute("data-x",x);
            target.setAttribute("data-y",y);
            this.line.remove();
            this.line = LeaderLine.setLine(this.$refs.bar1,gradient: true });
          },},});
      function dragMoveListener(event) {
        let { x } = event.target.dataset;
        let { y } = event.target.dataset;
        x = (parseFloat(event.target.getAttribute("data-x")) || 0) + event.dx;
        y = (parseFloat(event.target.getAttribute("data-y")) || 0) + event.dy;
        Object.assign(event.target.style,{
          width: `${event.rect.width}px`,height: `${event.rect.height}px`,transform: `translate(${x}px,${y}px)`,});
        event.target.setAttribute("data-x",x);
        event.target.setAttribute("data-y",y);
      }
      interact(bar).resizable({
        // 调整大小的时候确定哪些边可以拖动
        edges: { left: true,right: true,bottom: false,top: false },listeners: {
          end: (event) => {
            let target = event.target
            let x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx
            let y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy

            target.setAttribute('width',event.rect.width)
            target.setAttribute('height',event.rect.height)
            target.style.width = event.rect.width + 'px'
            target.style.height = event.rect.height + 'px'
            target.style.webkitTransform = target.style.transform = 'translate(' + x + 'px,' + y + 'px)'
            target.setAttribute('data-x',x)
            target.setAttribute('data-y',y)
            this.line.remove();
            this.line = LeaderLine.setLine(this.$refs.bar1,gradient: true });
          }
        },modifiers: [
          // // 拖拽时边缘只能在父容器里面
          // interact.modifiers.restrictEdges({
          //   outer: 'parent'
          // }),// // 最小宽高
          // interact.modifiers.restrictSize({
          //   min: { width: this.scale,height: this.barHeight }
          // })
        ],inertia: false,hold: 1
      })
      
    },deactivated() {
    // 使用了 keep-alive 时注销掉所有事件
    if (this.$refs.bar) {
      if (interact.isSet(this.$refs.bar)) {
        interact(this.$refs.bar).unset();
      }
    }
  },beforeDestory() {
    // 组件销毁前注销掉所有事件
    if (this.$refs.bar) {
      if (interact.isSet(this.$refs.bar)) {
        interact(this.$refs.bar).unset();
      }
    }
  },};
</script>

<style lang='less' scoped>
.bar {
  background-color: #0068E6;
  border-radius: 10px;
}
</style>

原文地址：https://blog.csdn.net/lee576/article/details/125731944