Question

我需要锚元素的边界客户端矩形。

我使用bind:this={someVariable}

标记为

但是当我将该代码添加到svelte组件时，我得到了svelte用来表示组件的其他对象。

我可以从绑定中访问封闭的元素或类似的东西吗？还是我必须用牺牲性的<div />包装每个组件并将其绑定？

Answer 1

使用<div id = "demo"></div>不会为您提供DOM元素，因为Svelte不需要您的组件具有根元素。这是一个有效的Svelte元素：

bind:this

一个完全没有任何标记的组件也是这样：

<script>
 ...
</script>
<div>...</div>
<div>...</div>

在这两种情况下，由于没有'root'元素，因此不可能为这些组件返回一个受限制的客户端rect。

也就是说，您可以做的是在组件中添加<script> ... </script>并导出该组件：

bind:this

现在您可以在父级中使用<script> export let anchor </script> <svelte:options accessors></scelte:options> <a bind:this={anchor}>...</a>获取锚元素（请注意，默认情况下，无法以这种方式访问道具，这就是为什么需要svelte：options的原因）

虽然它不是那么简单，但是它并不是那么简单的原因之一是，您通常不会与另一个组件（即该组件的域）生成的标记直接交互。 / p>

替代品可能是

直接暴露客户矩形而不是元素
将您要尝试的操作移至锚点组件本身

如何从苗条的组件获取元素绑定

1 个答案: