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

欢迎访问：天问博客