vue dom渲染完成后无法获取高度

最新推荐文章于 2023-08-31 18:03:20 发布

原创最新推荐文章于 2023-08-31 18:03:20 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript

Vue 专栏收录该内容

45 篇文章

订阅专栏

当在Vue应用中尝试在DOM渲染完成后获取元素高度时，可能会遇到高度为0的问题。解决这个问题的方法是在`updated`生命周期钩子中使用`$nextTick`，确保在DOM更新后再获取元素的高度。例如：

在dom渲染完成后想要获取该元素的高度时发现为0

解决办法:
在这个生命周期里添加获取高度的代码

   updated () {
        this.$nextTick(() => {
            this.contentHight = this.$refs.content.offsetHeight
        })
    },

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

TO_WebNow

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

vue3滚动高度为0，滚动页面高度固定bug

weixin_49295874的博客

01-11

751

app.vue 获取整个页面dom，存储到vuex中 <template> <div id="app" ref="maxBox"> <router-view keep-alive></router-view> </div> </template> <script> import { defineComponent, onMounted, ref } from "vue"; import $store fro

Vue监听数据渲染DOM完以后执行某个函数详解

10-18

例如，在`mounted`生命周期钩子中，有时候我们需要在组件挂载后获取元素，那么也应该使用`this.$nextTick`来确保可以访问到渲染后的DOM元素。以上就是Vue监听数据变化并在DOM更新完毕后执行函数的详细解析。通过...

1 条评论您还未登录，请先登录后发表或查看评论

1 条评论

YPPAH- 2024.05.24
获取到了,感谢博主

火狐在用offsetHeight获取div的高度时为0的解决方法

12-13

火狐在需要获取div的高度时，往往需要用到offsetHeight，有时会碰到offsetHeight获取到为0的现象，在使用IE或者火狐中，特别在目前div+css的方式，往往不定义div的高度，这是在添加div内容后，需要获取div的高度时，往往需要用到offsetHeight。在使用中，有时会碰到offsetHeight获取到为0的现象，但如果你用各种JS调试工具调试，又能在对象中看到值（如果直接指向offsetHeight是没值的，但如果是对象查看是有值的，在调试器中回车查看对象就已经刷新对象了，所以有值。）比如下面片段代码如下: 复制代码代码如下: <!DOCTYPE

获取officewidth,height；clientwidth,height scrollwidth,height.......等,结果为0的原因

weixin_44447804的博客

11-13

655

officewidth,height;clientwidth,height scrollwidth,height 等这类属性只有在渲染完成后,生成DOM树才能获取到值,如果没渲染就获取,值始终为0 注意: 内联元素如span等 , 没有这些值; 解决方法: 调整获取这类值的代码的执行顺序,将其放在页面渲染完成后执行! ...

vue.js数据渲染完成后，获取页面高度问题

热门推荐

自酌一杯酒

02-11

1万+

获取整个页面的高度用的$(document).height(); 遇到的问题在没有数据的时候页面的高度是690px; 调用数据请求后，在ajax的success里面打印高度还是690px （我认为是数据加载完了，但是页面没有渲染好，所以高度获取的还是之前的高度）; 我就在vue这几个(created，mounted，updated)生命周期都打印了下，都还是690px; 解决问题需要用到$......

(echarts)echarts第一次渲染柱状图获取不到容器宽高

nyf_unknow的博客

05-23

714

用this.$nextTick(()=>{…

vue监听数据渲染DOM完以后执行某个函数详解开发技术.zip

06-05

在Vue应用中，我们经常需要在数据变化后等待DOM更新完成，然后执行某些操作，例如进行DOM操作或者动画处理。本篇将详细介绍如何在Vue中监听数据渲染DOM完毕后执行特定函数。 Vue 提供了一个名为`$nextTick`的方法，...

解决vue页面渲染但dom没渲染的操作

10-15

任何语法错误都可能导致Vue无法正确解析和渲染。 7. **计算属性与侦听器**：使用计算属性`computed`来根据其他数据生成新的数据，或者使用`watch`来监听数据变化并执行相应的操作。 8. **Vue版本兼容性**： ...

vue中实现先请求数据再渲染dom分享

08-27

这篇分享正是在这样的背景下，讲述了如何在Vue项目中确保数据先加载完成再进行DOM渲染的策略。首先，我们来看一下Vue组件的生命周期。Vue的生命周期包括几个主要的钩子函数，如`created`, `mounted`, 等。其中`...

MutationObserver -- 判断vue Dom渲染完成

weixin_41801013的博客

01-16

5435

MutationObserverMutationObserver -- 判断vue Dom渲染完成MutationObserver 作用方法应用实例 MutationObserver – 判断vue Dom渲染完成获取想要获取dom元素的宽高,打印出来的结果值一直小于DOM元素本身高度。查阅很多资料无果，初步判断是vue升级以后，this.$nextTick监听方式发生改变。更改方案，...

解决Vue中mounted钩子函数获取节点高度出错问题

11-30

遇到的问题最近在开发一个Vue的项目，好几个页面都有用到一个页面楼层滑动的组件，我就直接封装成了一个，但是遇到一个bug，就是我需要得到这个组件的offsetTop，然后页面滚动到这个位置的时候，就设置position属性为fixed，让他固定在屏幕上。问题是当我在mounted钩子函数中获取offsetTop的时候，在新开的页签中打开页面，会得到错误的offsetTop，但是在当前页面刷新，就不会有问题。定位问题后来查到问题，就是加载的问题，新窗口打开图片，默认是没有带缓存的，图片是GET请求，是异步的，js运行的肯定比图片GET要快，所以当执行mounted钩子函数的时候，图片还

解决vue项目获取dom元素宽高总是不准确问题

11-20

dom元素内部内容是动态的，重置数据后直接获取宽高总是不准确： this.$refs.editor[0].offsetHeight; 原因：重置数据后获取dom元素宽高时，dom元素还未渲染完毕；解决方法：利用Vue.nectTick(callback) this.$nextTick(() => { this.$refs.editor[0].offsetHeight; }) Vue.nectTick() 是在下次DOM更新循环结束之后执行延迟回调补充知识：vue 获取指定元素的高度宽度等（使用vue中的 ref 获取到的是 dom 元素高度或者宽度）使用 vue 的时候，想要

vue获渲染页面后获取内容高度

qq_43437571的博客

08-03

2947

页面使用了组件，渲染完之后获取到的高度明显不对，原来写在mounted里getHeight()获取不到。解决办法：用$nextTick Vue.nextTick( [callback, context] ) 法一：在请求成功之后调用： this.$nextTick(() => { this.getHeight(); }); 我用了这种可以使用。法二：假如法一拿不到，就用watch 当获请求成功获取到值（监测到值发生变化）之后，调用$nextTick 参考： vue中如何获取元素正确的宽

JS动态加载图片，无法获取图片宽高的问题

wl562354983的博客

03-12

3610

写一个动态加载图片的瀑布流，并用animate实现简单的动画效果，所发现的问题。首先先贴代码：//模拟动态数据 var dataInt = {"data":[{"src":"31.jpg"}, {"src":"32.jpg"}, {"src":"33.jpg"}, {"src":"34.jpg"}, {"src&quot

nextTick不能获取到图片的宽高度

qq_25741071的博客

08-31

327

方法本身并不能直接获取图片的宽高度，它只是用于在下次DOM更新循环结束后执行回调函数。要获取图片的宽高度，需要在回调函数中使用其他方法来获取。事件监听器，在图片加载完成后执行回调函数。在回调函数中，可以获取到图片的宽高度，并进行相应的操作。对象来加载图片，并在加载完成后获取图片的宽高度。请注意，`path/to/image.jpg。事件监听器来在图片加载完成后执行回调函数。以下是一个示例代码，演示了如何使用。在上面的示例中，首先创建了一个。一种常见的方法是使用。

uniapp和vue在页面数据渲染完毕之后再获取高度

铁锤妹妹的博客

09-27

4567

在使用vue或者uniapp时，有时候需要在页面数据渲染完成之后调用方法，不然获取不到准确的数据，特别是在获取列表数据高度的时候，由于数据没有加载完，获取不到准确的高度。需要注意的是，当用户一进页面就滑动的时候，我们获取的高度也会发生变化。当下图中上部分的classifyList分类数据渲染完毕之后，获取一遍tab选项卡距离页面顶部的距离，有了这个距离进行其他操作；用于观察Vue实例上的数据变化，对应一个对象，键是需要观察的表达式，值是对应的回调函数。在修改数据之后立即使用这个方法，获取更新后的 DOM。

解决vue3+echarts关于无法获取dom宽度和高度的问题

黄钢的博客

08-04

9708

不过还有个问题得说一下，很明显，我用了elementplus作为UI框架，我特别喜欢el-card这个组件，所以很多时候我都用它来做布局，但是我在用的时候，发现我很难掌握它的布局规律，尤其是在结合echarts画图的时候，各种dom相关的问题层出不穷，所以我不得不放弃使用el-card，二是自己用div来做布局。第二个报错是说不能获取到echarts对应dom的宽或高，这个问题一般出现在设置dom节点的宽和高时，用了百分比形式，ECharts的宽高默认是以像素为单位的，并不能直接使用百分比来设置。

在Vue中获取DOM元素的实际宽高

pckzzy121的博客

08-22

324

为了保险起见，所有的 DOM 操作建议都放在。来获取一个真实的 DOM 元素。

echarts警告：Can‘t get DOM width or height. Please check dom.clientWidth and dom.clientHeight. ........

weixin_53443677的博客

10-25

1万+

vue+echarts

vue2获取动态数据渲染完成后的dom高度

vue dom渲染完成后 无法获取高度

在dom渲染完成后想要获取该元素的高度时 发现为0

1 条评论

vue dom渲染完成后无法获取高度

在dom渲染完成后想要获取该元素的高度时发现为0