如何在 Svelte 中使用 LeaderLine？答案

【问题标题】：How to use LeaderLine with Svelte?如何在 Svelte 中使用 LeaderLine？
【发布时间】：2021-03-02 16:02:59
【问题描述】：

我是 Svelte 的新手，我正在尝试将 LeaderLine 与 Svelte 应用程序一起使用。我设法用import LeaderLine from 'leader-line'; 导入它，但不幸的是包页面上给出的示例不起作用：

<script>
  import LeaderLine from 'leader-line';

  new LeaderLine(
    document.getElementById('start'),
    document.getElementById('end')
  );    
</script>

<div id="start">start</div>
<div id="end">end</div>

在浏览器控制台中我收到此错误：Uncaught (in promise) Error: start and end are required.

我认为这是因为 getElementById 的使用，如果我是对的，我们通常不想在 Svelte 中这样做。所以我想问你们是否知道如何让 LeaderLine + Svelte 一起运行。任何想法表示赞赏！

【问题讨论】：

标签： javascript npm import svelte rollupjs

【解决方案1】：

您需要将 LeaderLine 初始化包装在 onMount 中。 script 标签中的代码在组件添加到 DOM 之前运行，因此document.getElementById('start') 返回 null。 onMount 将在组件添加到 DOM 后运行。

<script>
  import LeaderLine from 'leader-line';
  import { onMount } from 'svelte';

  onMount(() => {
    new LeaderLine(
      document.getElementById('start'),
      document.getElementById('end')
    );
  });
</script>

虽然您可以在 Svelte 中使用 getElementId，但将 Svelte-ier 绑定到开始和结束元素。

<script>
  import LeaderLine from 'leader-line';
  import { onMount } from 'svelte';

  let start, end;
  onMount(() => {
    new LeaderLine(start, end);
  });
</script>

<div bind:this={start}>start</div>
<div bind:this={end}>end</div>

另外，如果您遇到“需要开始和结束”错误，我假设您已经知道这一点，但我必须使用 @rollup/plugin-legacy 和以下汇总配置来构建应用程序，因为领导线不导出任何内容.

export default {
  // ... other config
  plugins: [
    // ... other plugins
    legacy({ 'node_modules/leader-line/leader-line.min.js': 'LeaderLine' }),
  ]
};

【讨论】：