我正在尝试测量组件的高度,但始终未定义。如果我在组件周围放置一个 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>
Head
是一个组件,而不是一个元素。
您要么需要绑定一个返回底层元素的属性,要么获得对该元素的访问权限或使用包装器。
getElement()
函数,所以这里你可以试试getElement().offsetHeight
来代替。