H5W3
当前位置:H5W3 > 其他技术问题 > 正文

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

Vuemounted 中通过 refs 无法用到元素高度

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

clipboard.png
可以看到顶部是 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

最后一种可以获取,但是不满足在页面加载完成后立马获取到高度

回答:

mounted只是vue渲染完毕,不代表里面的样式也渲染完毕.
你在读取高度的时候,页面还没渲染完成

回答:

通过this.$refs.header.offsetHeight获取高度试试

本文地址:H5W3 » Vue 在 mounted 中通过 refs 无法调用到元素的高度

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址