dom元素内部内容是动态的,重置数据后直接获取宽高总是不准确:
this.$refs.editor[0].offsetHeight;
this.$refs.editor[0].offsetHeight;原因:重置数据后获取dom元素宽高时,dom元素还未渲染完毕;原因:解决方法:利用Vue.nectTick(callback)解决方法:解决方法:
this.$nextTick(() => {
this.$refs.editor[0].offsetHeight;
})
this.$nextTick(() => {
this.$refs.editor[0].offsetHeight;
}) Vue.nectTick() 是在下次DOM更新循环结束之后执行延迟回调补充知识:vue 获取 指定元素的高度宽度等(使用vue中的 ref 获取到的是 dom 元素高度或者宽度)补充知识:补充知识:vue 获取 指定元素的高度宽度等(使用vue中的 ref 获取到的是 dom 元素高度或者宽度)使用 vue 的时候,想要获得一个指定的元素的高度时,可以使用 vue 中的 ref 。当 ref 加在普通的元素上,使用 this.ref.name 获取到的是 dom 元素示例示例写在 页面 html 部分的

写在 页面 方法 部分写在 页面 方法 部分这里的 offsetHeight 是返回元素的宽度(包括元素宽度、内边距和边框,不包括外边距)
let height= this.$refs.init.$el.offsetHeight;
let height= this.$refs.init.$el.offsetHeight;这里的offsetHeight可以替换,用来获取其他的属性这里的offsetHeight可以替换,用来获取其他的属性offsetWidth //返回元素的宽度(包括元素宽度、内边距和边框,不包括外边距)offsetHeight //返回元素的高度(包括元素高度、内边距和边框,不包括外边距)clientWidth //返回元素的宽度(包括元素宽度、内边距,不包括边框和外边距)clientHeight //返回元素的高度(包括元素高度、内边距,不包括边框和外边距)style.width //返回元素的宽度(包括元素宽度,不包括内边距、边框和外边距)style.height //返回元素的高度(包括元素高度,不包括内边距、边框和外边距)scrollWidth //返回元素的宽度(包括元素宽度、内边距和溢出尺寸,不包括边框和外边距),无溢出的情况,与clientWidth相同scrollHeigh //返回元素的高度(包括元素高度、内边距和溢出尺寸,不包括边框和外边距),无溢出的情况,与clientHeight相同除此之外,还可以获取带有单位的数值除此之外,还可以获取带有单位的数值
let height = window.getComputedStyle(this.$refs.init).height;
let height = window.getComputedStyle(this.$refs.init).height;这样获取的值是有单位的。以上这篇解决vue项目获取dom元素宽高总是不准确问题就是小编分享给大家的全部内容了,希望能给大家一个参考。