Я пытаюсь использовать 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>
вот что я получаю:
Это печатается только в первый раз (конечно, это внутри onMount), если я изменяю размер окна, ничего не меняется.
Мне нужно, чтобы w
и h
всегда обновлялись. Как я могу сделать?
🤔 А знаете ли вы, что...
HTML поддерживает атрибуты для определения языка и кодировки веб-страницы.
Если вы сделаете журнал реактивным $: 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>
<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