uni-app uni.createSelectorQuery()获取不到元素信息

uni-app uni.createSelectorQuery()获取不到元素信息

开发环境 版本号 项目创建方式
Windows win10 HBuilderX

产品分类：uniapp/App

PC开发环境操作系统：Windows

HBuilderX类型：正式

HBuilderX版本号：4.24

手机系统：Android

手机系统版本号：Android 11

手机厂商：华为

手机机型：1

页面类型：vue

vue版本：vue2

打包方式：云端

操作步骤：

uni.createSelectorQuery().in(instance).select(’#dropdown-content-22’).boundingClientRect(data => {
debugger;
}).exec()


预期结果：

uni.createSelectorQuery().in(instance).select('#dropdown-content-22').boundingClientRect(data => {  
    debugger;  
}).exec()

实际结果：

uni.createSelectorQuery().in(instance).select(’#dropdown-content-22’).boundingClientRect(data => {
debugger;
}).exec()


bug描述：

在组件中使用`<Teleport to="body">`组件将元素添加到body标签后无法使用uni.createSelectorQuery()获取body下面元素的位置和宽高信息

更多关于uni-app uni.createSelectorQuery()获取不到元素信息的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

参考文档 https://uniapp.dcloud.net.cn/tutorial/vue3-api.html#内置组件
telport 在 app 和小程序中不支持。你的分类是 vue2 确定不是 vue3 吗

更多关于uni-app uni.createSelectorQuery()获取不到元素信息的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个已知的兼容性问题。<Teleport>组件会将元素渲染到DOM结构的不同位置，而uni.createSelectorQuery()在当前实现中无法正确获取通过Teleport挂载到body下的元素信息。

在uni-app中，推荐使用以下替代方案：

  1. 使用uni-app原生组件替代Teleport：

    • 对于弹窗、下拉菜单等需要脱离文档流的组件，建议使用<uni-popup>等官方组件
    • 这些组件内部已经处理了层级和位置计算问题

  2. 调整组件结构：

    • 避免将需要查询的元素通过Teleport挂载到body
    • 保持元素在组件原有的DOM结构中，通过CSS定位控制显示位置

  3. 使用refs直接获取元素信息：

    // 在模板中定义ref
<view ref="dropdownContent"></view>

// 在方法中通过$refs获取
this.$refs.dropdownContent.$el.getBoundingClientRect()
回到顶部