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



我需要一个锚点元素的绑定客户端rect。

我使用bind:this={someVariable}进行标记

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

我可以从绑定中访问所包含的元素或类似的内容吗?还是我必须用牺牲<div />包裹每个组件并绑定它?

使用bind:this不会为您提供DOM元素,因为Svelte不要求您的组件具有根元素。这是一个有效的Svelte元素:

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

一个根本没有任何标记的组件也是如此:

<script>
...
</script>

在这两种情况下,都不可能为这些组件返回绑定客户端rect,因为没有"root"元素。

也就是说,你可以在你的组件中添加一个bind:this并导出它:

<script>
export let anchor
</script>
<svelte:options accessors></svelte:options>
<a bind:this={anchor}>...</a>

在您的父级中,您现在可以使用child.anchor获得锚点元素(请注意,默认情况下,道具无法通过这种方式访问,这就是为什么您需要svelte:options(

不过,这并不那么简单的原因之一是,这是一种非常"不流畅"的工作方式,通常不会直接与另一个组件(即该组件的域(生成的标记交互。

替代方案可能是

  • 直接暴露客户端矩形而不是元素
  • 将要执行的操作移动到锚点组件本身

最新更新