如何在 Svelte 中使用 LeaderLine？

Question

我是 Svelte and I'm trying to use 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 运行组合在一起。任何想法表示赞赏！

Answer 1

您需要将 LeaderLine 初始化包装在 onMount 中。脚本标记运行s 中的代码在组件之前已添加到DOM，因此document.getElementById('start') returns 为空。 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。

<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 和以下 Rollup 配置来构建应用程序，因为 leader-line 没有'导出任何东西。

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

如何在 Svelte 中使用 LeaderLine？

How to use LeaderLine with Svelte?

javascript

npm

import

svelte

rollupjs