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


字数:266 阅读时长:1分钟 阅读:85

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

Vue && DOM

一、获取元素

Vue 中可以使用 ref 来获取一个真实的 DOM 元素。
为了保险起见,所有的 DOM 操作建议都放在 $nextTick() 方法中。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<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>

二、获取元素宽高

  1. 使用 offsetWidthoffsetHeight 方法,返回 Number 类型的值,如:52
1
2
3
4
5
let $ele = this.$refs.wrap
// 宽
let width = $ele.offsetWidth
// 高
let height = $ele.offsetHeight
  1. 使用 window 全局对象中的 getComputedStyle API,返回 String 类型的值,包含px单位,如: '100px'
1
2
3
4
5
let $ele = this.$refs.wrap
// 宽
let width = window.getComputedStyle($ele).width
// 高
let height = window.getComputedStyle($ele).height

欢迎访问:天问博客

本文作者: Tiven
发布时间: 2022-07-13
最后更新: 2023-07-17
本文标题: 在Vue中获取DOM元素的实际宽高
本文链接: https://www.tiven.cn/p/2979bc10/
版权声明: 本作品采用 CC BY-NC-SA 4.0 许可协议进行许可。转载请注明出处!
欢迎留言,提问 ^_^
个人邮箱: tw.email@qq.com
notification icon
博客有更新,将会发送通知给您!