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

Question

我有一个 Svelte 组件，#each它对其子组件执行操作。但是，在所有子项都更新后，我希望父项调整子项的位置以与他们引用的内容对齐。（想想：谷歌文档中的评论。）当孩子渲染时，孩子不可能知道自己的位置，因为我需要处理重叠：如果两个子组件引用相同的内容，我需要将它们垂直展开，所以它们是可读的。这需要家长处理。有没有首选的方法来处理这样的事情？我在想子组件可以将它们的 DOM 节点注册到父组件onMount，并且父组件可以在其afterUpdate. 想法？

这是一个粗略的香草 DOM/JavaScript 演示，有点说明我正在尝试做的事情。

标签： svelte

Answer 1

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

“内容”组件可以offsetTop与父组件共享。“评论组”组件将共享它的height.

然后父级将拥有计算每个“评论组”偏移量所需的数据。

父母需要决定对齐方式应该是垂直中间还是垂直顶部（如果之前的“评论组”的高度大于它所引用的内容，您可能需要对齐到垂直顶部）