Получить размеры родительского узла в svelte

Я пытаюсь использовать Svelte, и это мой первый раз, извините, возможно, за глупый вопрос. Я прочитал документацию по Svelte, но столкнулся с простой проблемой.

По сути, я хотел бы получить родительские размеры (ширину и высоту) компонента.

Пример:

<div>
  <MyNode />
</div>

Внутри MyNode хотелось бы иметь размеры родителя div. Как я могу это сделать?

Я пробовал это:

<script lang = "ts">
  import { onMount, tick } from 'svelte'

  let w = 0
  let h = 0
  console.info({ w, h })

  onMount(async () => {
    console.info('on mount')
    console.info({ w, h })
    // await tick()
  })
</script>

<main>
  <div class = "flex w-screen h-screen">
    <div class = "white w-150 min-w-150 h-full">side menu</div>

    <div
      class = "bg-ligthGrey flex-grow h-full border border-orange-500"
      bind:clientWidth = {w}
      bind:clientHeight = {h}
    >
      content
    </div>
  </div>
</main>

вот что я получаю:

Получить размеры родительского узла в svelte

Это печатается только в первый раз (конечно, это внутри onMount), если я изменяю размер окна, ничего не меняется. Мне нужно, чтобы w и h всегда обновлялись. Как я могу сделать?

🤔 А знаете ли вы, что...
HTML поддерживает атрибуты для определения языка и кодировки веб-страницы.


41
2

Ответы:

Решено

Если вы сделаете журнал реактивным $: console.info({ w, h }), он будет выполняться при каждом изменении w или h.

Чтобы иметь размеры родительского div внутри компонента, я бы передал их как реквизит РЕПЛ

<script>
    import MyNode from './MyNode.svelte'
    
    let w, h
</script>

<div bind:clientWidth = {w} bind:clientHeight = {h}>
    <MyNode parentWidth = {w} parentHeight = {h}/>
</div>

<style>
    div {
        background: lightblue;
    }
</style>
MyNode.svelte
<script>
    export let parentWidth, parentHeight    
</script>

MyNode - parentWidth: {parentWidth} - parentHeight: {parentHeight}

(Обратите внимание, что parentWidth и parentHeight изначально будут undefined внутри компонента — в зависимости от того, что вы планируете делать на их основе, это должно быть обработано)


В отличие от других фреймворков, код между тегами script выполняется только однажды во время инициализации. Это объясняет, почему вы видите {w: 0, h: 0 }, поскольку это значения в то время.

Чтобы указать, что фрагмент кода должен выполняться снова, вы должны явно пометить его как «реактивный». В вашем случае это будет:

$: console.info({w, h});

Вы можете пройти обучение, чтобы узнать больше об этом: https://svelte.dev/tutorial/reactive-assignments