fix: 🐛 修复dialog指示器受到scale影响的尺寸计算错误的问题 (#4786)

Tencent · Nov 30, 2024 · e57d364 · e57d364
1 parent e639a3c
commit e57d364
Showing 1 changed file with 8 additions and 2 deletions.
diff --git a/src/tabs/tab-nav-bar.tsx b/src/tabs/tab-nav-bar.tsx
@@ -31,12 +31,18 @@ export default defineComponent({
         if (props.navs[i].props.value === props.value) {
           break;
         }
-        offset += props.navs[i]?.el?.getBoundingClientRect()?.[sizePropName] || 0;
+        if (props.navs[i]?.el) {
+          const sizeWithUnit = getComputedStyle(props.navs[i].el as Element)[sizePropName as 'width' | 'left'];
+          const size = parseFloat(sizeWithUnit);
+          offset += size;
+        }
       }
       if (!props.navs[i]) return {};
       return {
         [offsetPropName]: `${offset}px`,
-        [sizePropName]: `${props.navs[i].el?.getBoundingClientRect()?.[sizePropName] || 0}px`,
+        [sizePropName]: props.navs[i].el
+          ? getComputedStyle(props.navs[i].el as Element)[sizePropName as 'width' | 'left']
+          : '0px',
       };
     };
     const update = () => (navBarStyle.value = getStyle());