如何在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.js中 computed和methods不同机制
这篇文章给大家介绍了Vue.js中 computed和methods不同机制,在vue.js中,methods和computed两种方式来动态当作方法使用,文中还给大家提到了computed和methods的区别,感兴趣的朋友一起看看吧2018-03-03VueAwesomeSwiper在VUE中的使用以及遇到的一些问题
这篇文章主要介绍了VueAwesomeSwiper在VUE中的使用以及遇到的一些问题,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2018-01-01为什么Vue3.0使用Proxy实现数据监听(defineProperty表示不背这个锅)
这篇文章主要介绍了为什么Vue3.0使用Proxy实现数据监听?defineProperty表示不背这个锅,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2019-10-10
最新评论