vue3-leaderline插件中连线只填充body而不填充其他元素的问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#frame {
margin: 64px;
width: 240px;
height: 240px;
overflow: scroll;
}
#container {
width: 480px;
height: 480px;
position: relative;
background-color: beige;
}
.terminal {
width: 32px;
height: 32px;
position: absolute;
background-color: blue;
}
#terminal-1 {
left: 32px;
top: 32px;
}
#terminal-2 {
left: 416px;
top: 320px;
}
#terminal-3 {
left: 64px;
top: 180px;
}
#wrapper {
width: 0;
height: 0;
position: relative;
}
</style>
<script src="https://lib.baomitu.com/leader-line/1.0.7/leader-line.min.js"></script>
</head>
<body>
<div id="frame">
<div id="container">
<div id="terminal-1" class="terminal"></div>
<div id="terminal-2" class="terminal"></div>
<div id="terminal-3" class="terminal"></div>
</div>
<div id="wrapper"></div>
</div>
</body>
<script>
var elmWrapper = document.getElementById('wrapper'),
rectWrapper = elmWrapper.getBoundingClientRect(),
line1 = new LeaderLine(document.getElementById('terminal-1'),
document.getElementById('terminal-2')),
elmLine1 = document.querySelector('.leader-line:last-of-type'),
line2 = new LeaderLine(document.getElementById('terminal-3'), line1.end),
elmLine2 = document.querySelector('.leader-line:last-of-type');
elmWrapper.style.transform = 'translate(-' + (rectWrapper.left + pageXOffset) + 'px, -' +(rectWrapper.top + pageYOffset) + 'px)';
elmWrapper.appendChild(elmLine1);
elmWrapper.appendChild(elmLine2);
document.getElementById('frame').scrollTo(50, 50);
setTimeout(function () {
document.getElementById('terminal-1').style.top = 55;
line1.position();
}, 1000);
</script>
</html>