使用leaderLine插件以及问题总结

置顶︶一颗莎

已于 2023-10-16 09:44:48 修改

阅读量2.7k

点赞数 2

文章标签： javascript 前端

于 2023-01-13 11:21:09 首次发布

本文链接：https://blog.csdn.net/qq_52136609/article/details/128671447

版权

本文总结了在前端项目中使用leaderLine插件遇到的问题及解决方案，包括线条位置不正确、线条未随tab切换销毁、线条不随滚动条滚动、以及在嵌套滚动条场景下线条处理的难点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用leaderLine插件以及问题总结
(1)npm i leader-line -S
将leader-line.main.js复制到项目中并在结尾写：exportDefault LeaderLine

（2）创建公共函数createLine

路径： src/utils/createLine.js

import LeaderLine from './plugins/leader-line.min'
export function createLine(startEle,endEle,styleOption{
    return new LeaderLine(startEle,endEle,{
    ...styleOption
    })
}

(3）在页面调用createLine（）

import {createLine} from '@/utils/createLine.js'
mounted(){
	setTimeout(() => {
            this.getLine()
        },50);
},
methods:{
	 getLine() {
		let startEle1 = document.getElementById('start1')
	                let endEle1 = document.getElementById('end1')
	                this.line1 = createLine(startEle1,endEle1,{
	                    color:'#3E5C73',
	                    size: 2,
	                    startSocket: 'rigth', //在指引线开始的地方从元素左侧开始
	                    endSocket: 'left',
	                    startPlug: "behind",
	                    endPlug: "arrow1",
	                    path: 'straight'
	                })
	}
}

问题1：tab栏切换页面，mounted调用创建的线条，页面显示的线条位置不正确

解决：在mounted中使用setTimeOut

setTimeout(() => {
	this.getLine()
},50);

问题2：tab栏切换后，创建的线条一直存在
解决：beforeDestroy销毁线条线条，调用线条实例remove()

问题3：滚动条滚动，线条不跟随滚动条滚动
解决：监听滚动条,并调用线条实例position()

let scrollView = this.$refs.tasksMaterialView
scrollView.addEventListener('scroll',function(){
	this.line1.position()
}, false);

问题4：大盒子嵌套小盒子，小盒子内是有线条的页面；设置小盒子超出高度出现滚动条；但是同时大盒子也有滚动条（大盒子不想有滚动条）
问题分析：小盒子出现滚动条后线条一直存在。可以监听小盒子滚动，调用线条hide()线条隐藏；但是大盒子还存在线条，是因为线条还存在页面(超出大盒子高度，出现滚动条)，只是隐藏了，除非使用线条remove()移除（目前没有合适的解决方案）