leaderline 父元素问题

281 阅读1分钟

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;
      /* Origin of coordinates for lines, and scrolled content (i.e. not `absolute`) */
    }
  </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');

  // Move to the origin of coordinates as the document
  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>