vue获取dom元素的宽高

### Vue 3 中通过 `ref` 获取 DOM 元素高度 在 Vue 3 中，可以通过组合式 API 的方式来获取 DOM 元素的高度。具体实现方法如下： #### 使用 `onMounted` 和 `ref` 可以利用 `ref` 来绑定目标 DOM 元素，并在其挂载完成后访问该元素的相关属性（如 `offsetHeight` 或 `clientHeight`）。以下是完整的代码示例[^1]。 ```javascript <template> <div ref="myRef">这是一个测试元素</div> </template> <script> import { ref, onMounted } from 'vue'; export default { setup() { const myRef = ref(null); onMounted(() => { if (myRef.value) { console.log('DOM 高度:', myRef.value.offsetHeight); // 访问 DOM 元素的高度 } }); return { myRef, }; }, }; </script> ``` 上述代码展示了如何通过 `onMounted` 生命周期钩子，在组件挂载完成之后读取指定 DOM 元素的高度。这里使用的是 `offsetHeight` 属性，它返回元素的内容区域加上边框和内边距的高度。 --- #### 结合 `nextTick` 动态更新后的高度 如果需要等待某些异步操作或者动态渲染结束后再获取 DOM 元素的高度，则可以借助 `nextTick` 方法。下面是一个例子[^2]。 ```javascript <template> <h2 ref="domH2">{{ title }}</h2> </template> <script> import { ref, nextTick } from 'vue'; export default { setup() { const domH2 = ref(null); const title = ref('初始标题'); setTimeout(() => { title.value = '新的标题'; nextTick(() => { if (domH2.value) { console.log('更新后 H2 高度:', domH2.value.clientHeight); // 客户端可见部分高度 } }); }, 1000); return { domH2, title, }; }, }; </script> ``` 在这个案例中，当数据发生变化并触发视图重新渲染时，`nextTick` 确保了我们可以在新内容完全呈现后再去测量其尺寸。 --- ### 总结 无论是静态还是动态场景下，都可以灵活运用 Vue 提供的工具函数以及响应式的特性来捕获所需的信息。对于简单的初始化需求可以直接采用 `onMounted`；而对于涉及复杂状态变化的情况则推荐配合 `nextTick` 实现更精确的操作逻辑。