在Vue中，可以使用$refs获取元素并利用JavaScript的属性来获取当前div与边框的距离。例如，在mounted生命周期钩子中，通过`this.$refs.tooltipRef.offsetWidth`或`this.$nextTick()`来获取元素的宽度。除了offsetWidth，还可以使用offsetHeight、clientWidth、clientHeight等属性来获取元素的不同尺寸信息，这些属性可以帮助开发者精确地掌握元素在页面中的位置和大小。
// 元素上加上ref
在mounted写 因为我是html标签可以不用加
el(如果是html标签就不用加)
this.$refs.tooltipRef.offsetWidth
this.$refs.tooltipRef.$el.offsetWidth
建议在this.$nextTick写
this.$nextTick(() => {
console.log(this.$refs.tooltipRef.offsetWidth)
})
offsetWidth //返回元素的宽度(包括元素宽度、内边距和边框，不包括外边距)
offsetHeight //返回元素的高度(包括元素高度、内边距和边框，不包括外边距)
clientWidth //返回元素的宽度(包括元素宽度、内边距，不包括边框和外边距)
clientHeight //返回元素的高度(包括元素高度、内边距，不包括边框和外边距)
style.width //返回元素的宽度(包括元素宽度，不包括内边距、边框和外边距)
style.height //返回元素的高度(包括元素高度，不包括内边距、边框和外边距)
scrollWidth //返回元素的宽度(包括元素宽度、内边距和溢出尺寸，不包括边框和外边距)，无溢出的情况，与clientWidth相同
scrollHeigh //返回元素的高度(包括元素高度、内边距和溢出尺寸，不包括边框和外边距)，无溢出的情况，与clientHeight相同
扫一扫
5690
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
