dcloudio / dcloudio/uni-app

createSelectorQuery().in()在h5端不能精确查询到当前组件实例下的节点信息

Open
#4,108 0 comments 0 reactions 1 assignee Claimed by @Otto-J View on GitHub
h5 vue3 提供了复现方案
Dominant language
JavaScript
Stars
41.6k
Forks
3.7k
Avg merge
7h 6m
Merged PRs (30d)
6

Description

**问题描述**
createSelectorQuery().in()中传入getCurrentInstance()返回的当前组件实例,执行exec(),获取到的一直是嵌套组件的外部节点下第一个同类组件中的节点信息,后续同级组件里的节点信息获取不到。(小程序中正常,在web端不行)

**复现步骤**
-src/pages/index/index.vue
```html



123?



123?




```
-components/Tooltip/Tooltip.vue
```html

import { ref, getCurrentInstance } from 'vue'
interface Props {
text: string
}
const props = defineProps<Props>()
const isFocus = ref(false)
const position = {
scrollTop: 0,
}
const top = ref(0)
const left = ref(0)

function showTip() {
query.exec()
}
function needHideTip() {
isFocus.value = false
}

const instance = getCurrentInstance()
const query = uni.createSelectorQuery().in(instance)
query.selectViewport().scrollOffset((res) => {
if (!Array.isArray(res) && res.scrollTop !== undefined) {
position.scrollTop = res.scrollTop
}
})
const tipWrapperNodeRef = query.select('.tip-wrapper')
tipWrapperNodeRef.boundingClientRect((res) => {
// 这里在外部页面点击不同的tooltip,返回的一直是第一个tooltip内部的tip-wrapper的节点信息
console.log(res)
if (!Array.isArray(res)) {
top.value = position.scrollTop + (res.top ?? 0) + (res.height ?? 0)
isFocus.value = true
}
})







{{ $props.text }}





{{ $props.text }}

```
**预期结果**
点击同一个父级节点下的不同tooltip组件,组件内部调用的查询节点信息返回当前组件里的对应节点

**实际结果**
实际返回的一直是父级节点下第一个同类型组件里的节点信息

**系统信息:**
- 发行平台: H5平台
- 操作系统 windows chrome firefox最新版
- HBuilderX版本 [如使用HBuilderX,则需提供 HBuilderX 版本号]
- uni-app版本 3.0.0-3061520221228001

**补充信息**
通过断点 发现在getNodesInfo如果是Fragment会去使用父级dom节点作为根节点去执行query,这样就导致执行querySelector的时候从外部父级去执行,这样只要存在同级的组件,组件里的querySelector始终返回的都会是第一个组件里的节点信息。
而小程序的组件和外部是天然隔离的,所以不存在这种问题。
建议h5端组件内部querySelector的时候也通过querySelectorAll去执行,然后通过vue的组件id去过滤不符合的信息
![图片](https://user-images.githubusercontent.com/23022401/211696857-63c7f89a-6ff5-489f-b26a-e41cba163ff0.png)

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.