vue3组件获取dom元素宽高

### Vue3 中获取 DOM 元素宽高的方法 在 Vue3 组件中，可以通过 `ref` 和组合式 API 的方式来获取 DOM 元素的宽高。以下是具体实现： #### 使用 `ref` 和 `$nextTick` Vue3 提供了新的组合式 API，其中 `ref` 可用于绑定 DOM 节点。为了确保 DOM 已经渲染完成后再执行操作，推荐使用 `onMounted` 配合 `nextTick`。 ```javascript <template> <div class="box" ref="wrap"></div> </template> <script> import { ref, onMounted, nextTick } from 'vue'; export default { setup() { const wrap = ref(null); onMounted(() => { nextTick(() => { if (wrap.value) { const width = wrap.value.offsetWidth; // 宽度 const height = wrap.value.offsetHeight; // 高度 console.log(`宽度: ${width}, 高度: ${height}`); } }); }); return { wrap }; }, }; </script> <style scoped> .box { width: 100%; height: 200px; background-color: pink; } </style> ``` 通过这种方式可以安全地访问 DOM 元素的宽高[^1]。 #### 使用 `getComputedStyle` 除了直接读取 `offsetWidth` 和 `offsetHeight` 外，还可以借助 `window.getComputedStyle` 方法获取更详细的样式信息。需要注意的是，该方法返回的结果带有单位（如 `'100px'`），因此可能需要进一步处理。 ```javascript const style = window.getComputedStyle(wrap.value); if (style) { const width = parseInt(style.width); // 去掉单位后的数值 const height = parseInt(style.height); // 去掉单位后的数值 console.log(`宽度: ${width}, 高度: ${height}`); } ``` 此方法适用于需要精确控制样式的场景[^2]。 #### 利用计算属性动态更新尺寸 如果希望实时监控某个 DOM 元素的变化情况，则可以在 Vue3 的响应式机制下定义一个计算属性或者监听器来进行动态调整。 ```javascript computed: { elementSize() { const element = this.$refs.wrap; if (!element) return null; return { width: element.clientWidth, height: element.clientHeight, }; }, }, watch: { elementSize(newVal) { console.log('DOM 尺寸发生变化:', newVal); }, }, ``` 不过这种方法更适合于传统选项式 API，在组合式 API 下通常会采用自定义 Hook 或者 Refs 结合的方式替代它[^3]。 综上所述，以上三种途径均能有效解决 vue3 获取 dom 元素宽高的需求，并且各有优劣之处取决于实际应用场景的选择。 ---