使用leaderLine插件以及问题总结

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

使用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', //在
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值