如何在Vue中获取DOM元素的实际宽高，实现动态调整布局？

本文共计523个文字，预计阅读时间需要3分钟。

目录+前言+一、获取元素+二、获取元素宽高+补充：Vue项目获取DOM元素宽高总是不精确+总结+前言+最近使用D3.js开发可视化解耦图，因为移动端做了rem适配，所以需要动态计算获取图表容宽+

目录

• 前言
• 一、获取元素
• 二、获取元素宽高
• 补充：vue项目获取dom元素宽高总是不准确
• 总结

前言

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

一、获取元素

在 Vue 中可以使用 ref 来获取一个真实的 DOM 元素。

为了保险起见，所有的 DOM 操作建议都放在 $nextTick() 方法中。