vue实现连接线

效果展示

实现代码

下载插件npm install --save leader-line-vue

<template>
  <div class="wrap">
    <div ref="start" class="start">start</div>
    <div ref="end" class="end">end</div>
  </div>
</template>
<script>
import LeaderLine from "leader-line-vue";
export default {
  data(){
    return {
      line:null,
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.line = LeaderLine.setLine(this.$refs.start, this.$refs.end, {
        dash: true,
        color:"red",
        size :1,
        gradient: true,
      });
    });
  },
  beforeRouteLeave(to, from, next){
    this.line.remove();
    next();
  },
};
</script>
<style lang="scss" scoped>
.wrap {
  width: 100%;
  height: 100%;
  text-align: center;
  .start {
    width: 100px;
    height: 100px;
    background-color: pink;
    margin-bottom: 300px;
    display: inline-block;
  }
  .end {
    width: 100px;
    height: 100px;
    background-color: firebrick;
  }
}
</style>