uniapp vue3 获取元素高度

### 在 UniApp Vue3 中动态获取 DOM 元素的高度在 UniApp 结合 Vue3 的项目中，可以利用 `uni.createSelectorQuery()` 方法来实现对指定元素尺寸的查询。此方法返回一个新的 SelectorQuery 对象实例，通过该对象可以选择页面中的节点并获得其布局位置和尺寸信息。对于希望监听特定视图组件大小变化的情况，在模板部分定义好目标区域，并为其赋予独一无二的选择器名称或者类名以便后续选取操作： ```vue <template> <view class="example">  <view id="targetElement">这是一个测试框</view> <button @click="fetchHeight()">点击以显示高度</button> </view> </template> ``` 接着是在脚本标签内的 JavaScript 部分编写逻辑处理函数用于触发获取高度的动作： ```javascript <script setup> import { ref } from 'vue'; const targetHeight = ref(0); function fetchHeight() { const query = uni.createSelectorQuery(); query.select('#targetElement').boundingClientRect((rect) => { if (rect !== null && typeof rect === 'object') { targetHeight.value = Math.floor(rect.height); console.log(`当前元素高度为 ${targetHeight.value}px`); } }).exec(); } </script> ``` 上述代码展示了如何创建一个简单的按钮事件处理器`fetchHeight`, 当用户点击按钮时会调用这个方法并通过`createSelectorQuery`接口选择具有ID为`targetElement`的DOM节点, 调用`boundingClientRect`方法得到它的边界矩形数据[^1]。值得注意的是，当涉及到更复杂的场景比如响应式设计或是动画效果引起的尺寸改变时，则可能还需要考虑其他因素如定时轮询检测、Intersection Observer API 或者 CSS 变量配合媒体查询等方式来进行更加精准高效的控制[^3]。为了确保兼容性和性能优化，建议开发者们始终关注官方文档更新以及社区最佳实践案例的学习借鉴[^2]。

阅读全文