Browse Source

修复 cl-tabs 在 鸿蒙 端下划线不显示问题

icssoa 4 months ago
parent
commit
85cee67629
1 changed files with 44 additions and 49 deletions
  1. 44 49
      uni_modules/cool-ui/components/cl-tabs/cl-tabs.uvue

+ 44 - 49
uni_modules/cool-ui/components/cl-tabs/cl-tabs.uvue

@@ -73,7 +73,7 @@
 
 <script lang="ts" setup>
 import { type PropType, computed, getCurrentInstance, nextTick, onMounted, ref, watch } from "vue";
-import { isDark, isEmpty, isHarmony, isNull, parseClass, parsePt, parseRpx } from "@/cool";
+import { isDark, isEmpty, isNull, parseClass, parsePt, parseRpx } from "@/cool";
 import type { ClTabsItem, PassThroughProps } from "../../types";
 
 // 定义标签类型
@@ -350,58 +350,53 @@ function getRects() {
 
 // 刷新tab区域的宽度和位置信息
 function refresh() {
-	setTimeout(
-		() => {
-			// 创建选择器查询
-			uni.createSelectorQuery()
-				// 作用域限定为当前组件
-				.in(proxy)
-				// 选择tab容器
-				.select(".cl-tabs")
-				// 获取容器的left和width
-				.boundingClientRect((node) => {
-					// 设置tab左侧偏移
-					tabLeft.value = (node as NodeInfo).left ?? 0;
-					// 设置tab宽度
-					tabWidth.value = (node as NodeInfo).width ?? 0;
-
-					// 获取所有标签的位置信息
-					getRects();
-				})
-				.exec();
-		},
-		isHarmony() ? 50 : 0
-	);
+	nextTick(() => {
+		// 创建选择器查询
+		uni.createSelectorQuery()
+			// 作用域限定为当前组件
+			.in(proxy)
+			// 选择tab容器
+			.select(".cl-tabs")
+			// 获取容器的left和width
+			.boundingClientRect((node) => {
+				// 设置tab左侧偏移
+				tabLeft.value = (node as NodeInfo).left ?? 0;
+				// 设置tab宽度
+				tabWidth.value = (node as NodeInfo).width ?? 0;
+
+				// 获取所有标签的位置信息
+				getRects();
+			})
+			.exec();
+	});
 }
 
-// 监听modelValue变化,更新active和位置
-watch(
-	computed(() => props.modelValue!),
-	(val: string | number) => {
-		// 更新当前选中标签
-		active.value = val;
-		// 更新下划线、滑块等位置
-		updatePosition();
-	},
-	{
-		// 立即执行一次
-		immediate: true
-	}
-);
+onMounted(() => {
+	// 监听modelValue变化,更新active和位置
+	watch(
+		computed(() => props.modelValue!),
+		(val: string | number) => {
+			// 更新当前选中标签
+			active.value = val;
+			// 更新下划线、滑块等位置
+			updatePosition();
+		},
+		{
+			// 立即执行一次
+			immediate: true
+		}
+	);
 
-// 监听标签列表变化,刷新布局
-watch(
-	computed(() => props.list),
-	() => {
-		nextTick(() => {
+	// 监听标签列表变化,刷新布局
+	watch(
+		computed(() => props.list),
+		() => {
 			refresh();
-		});
-	}
-);
-
-// 组件挂载时刷新布局,确保初始渲染正确
-onMounted(() => {
-	refresh();
+		},
+		{
+			immediate: true
+		}
+	);
 });
 </script>