uniapp小程序vue3获取dom实例createSelectorQuery_uniapp获取组件实例

需求，在页面中，有时需要获取渲染组件的长宽信息，可以使用select选择器进行查询，直接上代码如下：

<div ref="tabbar" id="tabbar" class="x-tabbar-wrap">
</div>
1
2

const getTabbarHeight = () => {
  const { windowWidth, safeAreaInsets } = <any>uni.getSystemInfoSync();
  const ratio = 750 / windowWidth;
  safeAreaInsetsBottom.value = safeAreaInsets.bottom * ratio;
  // 获取组件实例
  const instance = getCurrentInstance();
  const query = uni.createSelectorQuery().in(instance);
  query
    .select("#tabbar")
    .boundingClientRect((rect) => {
      console.log("rect", rect);
      if (rect) {
        console.log("rect", rect);
      }
    })
    .exec();
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17