解决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 部分的
<div ref="init"></div>
写在 页面 方法 部分
这里的 offsetHeight 是返回元素的宽度（包括元素宽度、内边距和边框，不包括外边距）
let height= this.$refs.init.$el.offsetHeight;
这里的offsetHeight可以替换，用来获取其他的属性
offsetWidth //返回元素的宽度（包括元素宽度、内边距和边框，不包括外边距）
offsetHeight //返回元素的高度（包括元素高度、内边距和边框，不包括外边距）
clientWidth //返回元素的宽度（包括元素宽度、内边距，不包括边框和外边距）
clientHeight //返回元素的高度（包括元素高度、内边距，不包括边框和外边距）
style.width //返回元素的宽度（包括元素宽度，不包括内边距、边框和外边距）
style.height //返回元素的高度（包括元素高度，不包括内边距、边框和外边距）
scrollWidth //返回元素的宽度（包括元素宽度、内边距和溢出尺寸，不包括边框和外边距），无溢出的情况，与clientWidth相同
scrollHeigh //返回元素的高度（包括元素高度、内边距和溢出尺寸，不包括边框和外边距），无溢出的情况，与clientHeight相同
除此之外，还可以获取带有单位的数值
let height = window.getComputedStyle(this.$refs.init).height;
这样获取的值是有单位的。
以上这篇解决vue项目获取dom元素宽高总是不准确问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持小牛知识库。
-
本文向大家介绍vue获取dom元素注意事项，包括了vue获取dom元素注意事项的使用技巧和注意事项，需要的朋友参考一下 vue想要获取dom元素的高，一般情况下我们都可以想到写在mounted函数里，即dom加载完再获取，但是结果并不如我们所想，又想到用一个 来获取，发现根本没用啊/。。 所以好的办法就是用一个setTimeout定时器，时间可以设为0，但是有时候生效，有时候不生效，还是加一个小的
-
本文向大家介绍js获取隐藏元素的宽高，包括了js获取隐藏元素的宽高的使用技巧和注意事项，需要的朋友参考一下 获取隐藏元素(display:none)的物理尺寸 问题及场景 假如我们有这样一个输入框，点击能展开选择。如下图： 在这里输入框和下方的展开区域是分离的，独立的两个控件！初始状态下面的可选框是隐藏的（ng-show=false） 展开区域中可折叠组件accordion（对应图中省份，排序字段
-
本文向大家介绍Vue项目开发常见问题和解决方案总结，包括了Vue项目开发常见问题和解决方案总结的使用技巧和注意事项，需要的朋友参考一下 Vue Cli 打包之后静态资源路径不对的解决方法 cli2版本： 将 config/index.js 里的 assetsPublicPath 的值改为 './' 。 cli3版本： 在根目录下新建 vue.config.js 文件，然后加上以下内容：（如果已经有
-
我希望能够获取<template #loadMore>中 id为"is_load"的div元素 但是ref无法引用到 ,在onMounted函数中使用nextTick回调打印处理这个dom也是空的，等待渲染后也不行 有什么方法可以操作到dom vue 无法获取到template中的dom元素?
-
本文向大家介绍JavaScript与JQUERY获取元素的宽、高和位置，包括了JavaScript与JQUERY获取元素的宽、高和位置的使用技巧和注意事项，需要的朋友参考一下 javascript中 ele.getBoundingClientRect()：获取一个元素相对于浏览器视口的的坐标（无论父元素定位与否），返回一个Object对象，该对象有6个属性：top/left/right/botto
-
本文向大家介绍详解在Vue中通过自定义指令获取dom元素，包括了详解在Vue中通过自定义指令获取dom元素的使用技巧和注意事项，需要的朋友参考一下 vue.js 是数据绑定的框架，大部分情况下我们都不需要直接操作 DOM Element，但在某些时候，我们还是有获取DOM Element的需求的； 在 vue.js 中，获取某个DOM Element常用的方法是将这个元素改成一个组件 (comp