获取Svelte中子组件的布局大小

Question

我正在将 VanillaJS 网站转换为 Svelte，需要在网页上随机放置 div。请注意，每个 div 大小都可以根据其内容而变化，它们在 CSS 中不能具有固定大小。

我可以轻松地以窗口大小为最大值计算每个 div 的随机顶部和左侧位置，并将其作为 props 发送到每个 div，以内联样式使用它。但我不知道如何减去每个div的计算大小，这样左上角位置有时不会将div部分放置在Windows屏幕之外。

在 Vanilla JS 中，我使用

offsetWidth

和

offsetHeight

来获取 div 的计算大小，因为存在

HTMLElement

类型，但它在 Svelte 中不起作用：我收到错误 Property 'offsetHeight' does not存在于类型“Element”。

关于如何实现这一目标有什么想法吗？

这是主要的代码

App.svelte

：

<script>
  import Window from "./components/Div.svelte";

  const left = Math.random() * window.innerWidth; // TODO substract div width
  const top = Math.random() * window.innerHeight; // TODO substract div height

  // THIS IS NOT WORKING
  // const el = document.querySelector('#my-div')
  // const left = Math.round(Math.random() * (window.innerWidth - el.offsetWidth))
  // const top = Math.round(Math.random() * (window.innerHeight - el.offsetHeight))

</script>

<main>
  <Div
    divName="my-div"
    top={top}px
    left={left}px
    htmlContent="My HTML content with <strong>bold text</strong> and <em>italicized text</em>."
  />
</main>

...这是在 div 子组件上

Div.svelte

:

<script>
    export let divName;
    export let top;
    export let left;
    export let htmlContent;
</script>

<div id={divName} class="div" style="top: {top}; left: {left};">
    <h1>{divName}</h1>
    <article>{@html htmlContent}</article>
</div>

<style>
    .div {
        min-width: 250px;
        max-width: 600px;
        position: absolute;
        background-color: red;
    }
</style>

Answer 1

可以获取 div 的尺寸，是的。这是按照here的教导以非常简洁的方式完成的。

<script>
    export let divName;
    export let top;
    export let left;
    export let htmlContent;

    export let width;
    export let height;
</script>

<div
    id={divName}
    class="div"
    style="top: {top}; left: {left};"
    bind:clientWidth={width}
    bind:clientHeight={height}
>
    <h1>{divName}</h1>
    <article>{@html htmlContent}</article>
</div>

<style>
    .div {
        min-width: 250px;
        max-width: 600px;
        position: absolute;
        background-color: red;
    }
</style>

我向您展示的这个修改将 2 个 props 绑定到 DIV 的维度。这意味着它的父组件可以按照here的教导绑定到所述道具。

对于调整顶部和左侧的特定情况，也许您不需要导出尺寸。也许你可以自己处理重新定位的问题。您可以将

top

和

left

属性视为“初始”位置值，然后让组件根据宽度自动更正其位置。您的选择。