如何在Vue中获取DOM元素的实际宽高
更新时间：2022年09月23日 09:32:10 作者：天問_
使用vue的时候,想要获得一个指定的元素的高度时,下面这篇文章主要给大家介绍了关于如何在Vue中获取DOM元素的实际宽高的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
前言
最近使用 D3.js 开发可视化图表，因为移动端做了 rem 适配，所以需要动态计算获取图表容器的宽高，其中涉及到一些原生DOM API的使用，避免遗忘这里总结一下。
一、获取元素
在 Vue 中可以使用 ref 来获取一个真实的 DOM 元素。
为了保险起见，所有的 DOM 操作建议都放在 $nextTick() 方法中。
<template>
<div class="box" ref="wrap"></div>
</template>
<script>
export default {
mounted() {
// 获取 DOM 元素
this.$nextTick(()=>{
let $ele = this.$refs.wrap
})
},
}
</script>
<style scoped>
.box {
width: 100%;
height: 200px;
background-color: pink;
}
</style>
二、获取元素宽高
使用 offsetWidth 、 offsetHeight 方法，返回 Number 类型的值，如：52。
let $ele = this.$refs.wrap // 宽 let width = $ele.offsetWidth // 高 let height = $ele.offsetHeight
使用 window 全局对象中的 getComputedStyle API，返回 String 类型的值，包含px单位，如： '100px'。
let $ele = this.$refs.wrap // 宽 let width = window.getComputedStyle($ele).width // 高 let height = window.getComputedStyle($ele).height
补充：vue项目获取dom元素宽高总是不准确
dom元素内部内容是动态的，重置数据后直接获取宽高总是不准确：
this.$refs.editor[0].offsetHeight;
原因：重置数据后获取dom元素宽高时，dom元素还未渲染完毕；
解决方法：利用Vue.nectTick(callback)
this.$nextTick(() => {
this.$refs.editor[0].offsetHeight;
})
Vue.nectTick() 是在下次DOM更新循环结束之后执行延迟回调
总结
到此这篇关于如何在Vue中获取DOM元素实际宽高的文章就介绍到这了,更多相关Vue获取DOM元素实际宽高内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了Vue通过WebSocket建立长连接的实现代码，文中给出了问题及解决方案,需要的朋友可以参考下2019-11-11
下面小编就为大家分享一篇vue实现模态框的通用写法推荐，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
这篇文章主要介绍了基于Vue3和Plotly.js实现交互式3D图,本代码旨在为数据可视化提供一个交互式图表,允许用户动态控制图表中线条的颜色和可见性,此功能对于探索大型数据集或突出特定数据子集非常有用,需要的朋友可以参考下2024-07-07
最近在研究uni-app跨端开发APP和H5的通讯和交互,比如H5调用APP的方法,APP往H5里面传参,H5往app外面传参,这篇文章主要给大家介绍了关于uniapp webview和H5通信的3种方式,需要的朋友可以参考下2024-04-04
本篇文章主要介绍了vue2.0中click点击当前li实现动态切换class ，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-06-06
解决iview table组件里的 固定列 表格不自适应的问题
这篇文章主要介绍了解决iview table组件里的 固定列 表格不自适应的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
今天小编就为大家分享一篇使用Vue.set()方法实现响应式修改数组数据步骤，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
这篇文章主要为大家介绍了Vue中从template到jsx语法教程示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-10-10
详解VS Code使用之Vue工程配置format代码格式化
这篇文章主要介绍了详解VS Code使用之Vue工程配置format代码格式化，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-03-03
项目完成，我们会将项目进行上线，为了提升性能，我们往往会进行一些优化处理，本文主要介绍了vue项目打包以及优化的实现步骤，感兴趣的可以了解一下2021-07-07
最新评论