解决vue项目获取dom元素宽高总是不准确问题
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中的ref。
当ref加在普通的元素上，使用this.ref.name获取到的是dom元素
示例
写在页面html部分的
写在页面方法部分
这里的offsetHeight是返回元素的宽度（包括元素宽度、内边距和边框，不包括外边距）
letheight=this.$refs.init.$el.offsetHeight;
这里的offsetHeight可以替换，用来获取其他的属性
offsetWidth//返回元素的宽度（包括元素宽度、内边距和边框，不包括外边距）
offsetHeight//返回元素的高度（包括元素高度、内边距和边框，不包括外边距）
clientWidth//返回元素的宽度（包括元素宽度、内边距，不包括边框和外边距）
clientHeight//返回元素的高度（包括元素高度、内边距，不包括边框和外边距）
style.width//返回元素的宽度（包括元素宽度，不包括内边距、边框和外边距）
style.height//返回元素的高度（包括元素高度，不包括内边距、边框和外边距）
scrollWidth//返回元素的宽度（包括元素宽度、内边距和溢出尺寸，不包括边框和外边距），无溢出的情况，与clientWidth相同
scrollHeigh//返回元素的高度（包括元素高度、内边距和溢出尺寸，不包括边框和外边距），无溢出的情况，与clientHeight相同
除此之外，还可以获取带有单位的数值
letheight=window.getComputedStyle(this.$refs.init).height;
这样获取的值是有单位的。
以上这篇解决vue项目获取dom元素宽高总是不准确问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。