bge-ui 1.9.1 → 1.9.2

package/dist/index.js

@@ -6648,6 +6648,7 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
     };
   }
 });
+const maxRetryCount = 3;
 const tabsKey$1 = "bge-tabs-context";
 const _sfc_main$u = /* @__PURE__ */ defineComponent({
   ...{
@@ -6679,6 +6680,7 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
     const barStyle = ref();
     const navOffset = ref(0);
     const scrollable = ref(false);
+    const updateRetryCount = ref(0);
     const tabsRef = ref(null);
     const navScrollRef = ref(null);
     function addPane(pane) {
@@ -6727,9 +6729,12 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
           if (!$el)
             return false;
           if ($el.clientWidth === 0 && index2 === 0) {
-            nextTick(() => {
-              update();
-            });
+            if (updateRetryCount.value < maxRetryCount) {
+              updateRetryCount.value++;
+              nextTick(() => {
+                update();
+              });
+            }
             return false;
           }
           if (tab.value !== props.modelValue) {
@@ -6739,6 +6744,7 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
           tab.setActive(true);
           offset2 = $el["offsetLeft"];
           tabSize = $el["clientWidth"];
+          updateRetryCount.value = 0;
           return false;
         });
       } else {
@@ -6869,8 +6875,9 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
       barStyle.value = getBarStyle();
       getNavOffset();
     };
+    const debouncedUpdate = useDebounceFn(update, 100);
     if (isBrowser) {
-      useResizeObserver(tabsRef, update);
+      useResizeObserver(tabsRef, debouncedUpdate);
     }
     onMounted(() => {
       update();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bge-ui",
-  "version": "1.9.1",
+  "version": "1.9.2",
   "description": "",
   "type": "module",
   "main": "./src/index.ts",

package/src/tabs/index.vue

@@ -11,7 +11,7 @@
   </div>
 </template>
 <script setup lang="ts">
-import { useResizeObserver } from "@vueuse/core"
+import { useResizeObserver, useDebounceFn } from "@vueuse/core"
 import { provide, ref, onMounted, watch, computed, nextTick } from "vue"
 
 // 检测是否在浏览器环境中
@@ -52,6 +52,8 @@ const panes = ref<TabPane[]>([])
 const barStyle = ref<{ width: string; transform: string } | undefined>()
 const navOffset = ref(0)
 const scrollable = ref(false)
+const updateRetryCount = ref(0)
+const maxRetryCount = 3
 
 // 引用
 const tabsRef = ref<HTMLElement | null>(null)
@@ -114,9 +116,12 @@ const getBarStyle = (): { width: string; transform: string } => {
       const $el = tab.ref
       if (!$el) return false
       if ($el.clientWidth === 0 && index === 0) {
-        nextTick(() => {
-          update()
-        })
+        if (updateRetryCount.value < maxRetryCount) {
+          updateRetryCount.value++
+          nextTick(() => {
+            update()
+          })
+        }
         return false
       }
       if (tab.value !== props.modelValue) {
@@ -127,6 +132,7 @@ const getBarStyle = (): { width: string; transform: string } => {
       tab.setActive(true)
       offset = $el['offsetLeft']
       tabSize = $el['clientWidth']
+      updateRetryCount.value = 0
       return false
     })
   } else {
@@ -260,9 +266,11 @@ const update = () => {
   getNavOffset()
 }
 
+const debouncedUpdate = useDebounceFn(update, 100)
+
 // 仅在浏览器环境中使用 ResizeObserver
 if (isBrowser) {
-  useResizeObserver(tabsRef, update)
+  useResizeObserver(tabsRef, debouncedUpdate)
 }
 
 onMounted(() => {