如何测量 Svelte 组件的像素高度？

问题描述 投票：0回答：1

我正在尝试测量组件的高度，但始终未定义。如果我在组件周围放置一个 html 容器，它会起作用，但这对我来说似乎不是正确的解决方案。

这是我的简洁代码：

<script lang='ts'>

import { onMount } from 'svelte';
import DataTable, {
    Head,
    Row,
    Cell,
  } from '@smui/data-table';

  let headElement;
  let headHeight = 0;



  const measureHead = () => {
    if(headElement) {
      headHeight = headElement.offsetHeight
    }
  }
  onMount(() => {
    measureHead();
    console.log("Height: ", headHeight) //Returns undefined
  })

</script>


<DataTable table$aria-label="User list" style="width: 100%;" >

    <Head bind:this={headElement}>
        <Row>
        <Cell style="width: 100%;">Title</Cell>
        <Cell>Type</Cell>
        <Cell numeric>Distance</Cell>
        </Row>
    </Head>
</DataTable>
svelte
1个回答
0
投票

Head
是一个组件，而不是一个元素。

您要么需要绑定一个返回底层元素的属性，要么获得对该元素的访问权限或使用包装器。

看来SMUI组件一般都会导出一个

getElement()
函数，所以这里你可以试试
getElement().offsetHeight
来代替。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.