我需要一个锚点元素的绑定客户端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(
不过,这并不那么简单的原因之一是,这是一种非常"不流畅"的工作方式,通常不会直接与另一个组件(即该组件的域(生成的标记交互。
替代方案可能是
- 直接暴露客户端矩形而不是元素
- 将要执行的操作移动到锚点组件本身