目录前言一、获取元素二、获取元素宽高补充：Vue项目获取dom元素宽高总是不准确总结前言 最近使用 D3.js 开发可视化图表，因为移动端做了 rem 适配，所以需要动态计算获取图表
最近使用 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
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元素实际宽高内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
--结束END--
本文标题: 如何在Vue中获取DOM元素的实际宽高
本文链接: https://www.lsjlt.com/news/168251.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0