仅在 Svelte 子节点全部更新后操作 DOM



我有一个Svelte组件,它对其子组件执行#each。但是,在所有子项更新后,我希望父项调整子项的位置以与他们引用的内容保持一致。(想想:谷歌文档中的评论。当子组件渲染时,子组件不可能知道自己的位置,因为我需要处理重叠:如果两个子组件引用相同的内容,我需要将它们垂直展开,以便它们可读。这需要由父母处理。有没有处理这样的事情的首选方法?我认为子组件可以将其 DOM 节点注册到父onMount,父组件可以定位在其afterUpdate中。想法?

这是一个粗略的普通 DOM/JavaScript 演示,可以说明我正在尝试做什么。

您可以使用数据绑定,而不是与父节点共享 DOM 节点。

"内容"组件可以与父组件共享其offsetTop。"评论组"组件将共享它的height

然后,父级将拥有计算每个"注释组"偏移量所需的数据。

父级需要决定对齐方式应该是垂直中间还是垂直顶部(如果以前的"注释组"的高度大于它所引用的内容,则可能需要对齐到垂直顶部(

您是否尝试过使用即时报价生命周期方法,https://svelte.dev/tutorial/tick

最新更新