【Vue】Vue 在 mounted 中通过 refs 无法调用到元素的高度

Z时代
2024-01-10
分类：技术分享

`Vue` 在 `mounted` 中通过 `refs` 无法`调`用到`元素`的`高度`

需求在页面加载完成后获取元素的高度然后计算后赋给另一元素

【Vue】Vue 在 mounted 中通过 refs 无法调用到元素的高度
可以看到顶部是 fxied 的所以导致下方文字（顶部的大小不确定，无法直接通过 css 设置）所以需要在页面加载完成获取然后给下方的 div 赋值

        mounted() {
const heightA = window.getComputedStyle(this.$refs.header).height;
console.log("heightA ==> "+heightA);}

输出 auto

        mounted() {
this.$refs.header.onload = () =>{
const heightA = window.getComputedStyle(this.$refs.header).height;
console.log("heightA ==> "+heightA);
};}

啥都不做

        mounted() {
this.$nextTick(()=>{
const heightA = window.getComputedStyle(this.$refs.header).height;
console.log("heightA ==> "+heightA);
})}

输出auto

        mounted() {
setTimeout(() => {
const heightA = window.getComputedStyle(this.$refs.header).height;
console.log("heightA ==> "+heightA);
}, 1000);}

输出50px