fix(tabbar): 修复 useTaroRect 报错问题 (#2775)

close #2188
jdf2e · Dec 20, 2023 · 38d341d · 38d341d
1 parent 4c7d346
commit 38d341d
Showing 1 changed file with 18 additions and 10 deletions.
diff --git 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
     };
   }