如何在Vue中获取DOM元素的实际宽高

前言

最近使用 D3.js 开发可视化图表,因为移动端做了 rem 适配,所以需要动态计算获取图表容器的宽高,其中涉及到一些原生DOM API的使用,避免遗忘这里总结一下。

Vue && DOM

一、获取元素

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>

二、获取元素宽高

使用 offsetWidthoffsetHeight 方法,返回 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更新循环结束之后执行延迟回调

总结

作者:天問_原文地址:https://blog.csdn.net/tiven_/article/details/125876626

%s 个评论

要回复文章请先登录注册