From 38d341d37a2160bc4414addecba0047b535da86d Mon Sep 17 00:00:00 2001
From: Eiinu <eiinu@qq.com>
Date: Thu, 21 Dec 2023 00:47:24 +0800
Subject: [PATCH] =?UTF-8?q?fix(tabbar):=20=E4=BF=AE=E5=A4=8D=20useTaroRect?=
 =?UTF-8?q?=20=E6=8A=A5=E9=94=99=E9=97=AE=E9=A2=98=20(#2775)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

close #2188
---
 src/packages/__VUE/tabbar/index.taro.vue | 28 +++++++++++++++---------
 1 file changed, 18 insertions(+), 10 deletions(-)

diff --git a/src/packages/__VUE/tabbar/index.taro.vue b/src/packages/__VUE/tabbar/index.taro.vue
index 898fd80bfd..075173ba30 100644
--- a/src/packages/__VUE/tabbar/index.taro.vue
+++ b/src/packages/__VUE/tabbar/index.taro.vue
@@ -1,7 +1,8 @@
 <template>
-  <view :class="{ 'nut-tabbar__placeholder': bottom && placeholder }" :style="{ height: height + 'px' }">
+  <view :class="{ 'nut-tabbar__placeholder': bottom && placeholder }" :style="{ height }">
     <view
-      ref="nutTabbar"
+      :id="`nut-tabbar-${refRandomId}`"
+      ref="nutTabbarRef"
       class="nut-tabbar"
       :class="{ 'nut-tabbar-bottom': bottom, 'nut-tabbar-safebottom': safeAreaInsetBottom }"
     >
@@ -15,6 +16,7 @@ import { onMounted, provide, reactive, ref, toRefs, watch } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 import Taro from '@tarojs/taro';
 import { TABBAR_KEY } from './types';
+import { useTaroRect } from '@/packages/utils/useTaroRect';
 const { create } = createComponent('tabbar');
 export default create({
   props: {
@@ -53,12 +55,14 @@ export default create({
   },
   emits: ['tabSwitch', 'update:modelValue'],
   setup(props, { emit }) {
+    const refRandomId = Math.random().toString(36).slice(-8);
     const { bottom, placeholder } = toRefs(props);
+    const height = ref('auto');
     const mdValue = reactive({
       val: props.modelValue,
       children: []
     });
-    const height = ref();
+    const nutTabbarRef = ref<HTMLElement | null>(null);
     function changeIndex(index: number, active: number | string) {
       emit('update:modelValue', active);
       parentData.modelValue = active;
@@ -81,17 +85,21 @@ export default create({
     );
     onMounted(() => {
       if (bottom.value && placeholder.value) {
-        setTimeout(() => {
-          const query = Taro.createSelectorQuery();
-          query.select('.nut-tabbar').boundingClientRect();
-          query.exec((res) => {
-            height.value = res[0].height;
-          });
-        }, 500);
+        Taro.nextTick(() => {
+          useTaroRect(nutTabbarRef).then(
+            (rect: any) => {
+              height.value = `${rect.height}px`;
+            },
+            () => {}
+          );
+        });
       }
     });
+
     return {
+      refRandomId,
       changeIndex,
+      nutTabbarRef,
       height
     };
   }