From 4f4275770d4c4be9759a3c424f095ce270d18303 Mon Sep 17 00:00:00 2001
From: icssoa <615206459@qq.com>
Date: Wed, 10 Sep 2025 23:10:37 +0800
Subject: [PATCH] =?UTF-8?q?cl-countdown=20=E6=B7=BB=E5=8A=A0=20auto=20?=
 =?UTF-8?q?=E5=8F=82=E6=95=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/demo/status/countdown.uvue              | 14 ++++-
 .../components/cl-countdown/cl-countdown.uvue | 52 ++++++++++++-------
 .../cool-ui/components/cl-countdown/props.ts  |  1 +
 3 files changed, 46 insertions(+), 21 deletions(-)

diff --git a/pages/demo/status/countdown.uvue b/pages/demo/status/countdown.uvue
index 8390160..8335e25 100644
--- a/pages/demo/status/countdown.uvue
+++ b/pages/demo/status/countdown.uvue
@@ -33,6 +33,10 @@
 				<cl-countdown :second="5" @done="onDone"></cl-countdown>
 			</demo-item>
 
+			<demo-item :label="t('3秒后开始倒计时')">
+				<cl-countdown ref="countdownRef" :second="5" :auto="false"></cl-countdown>
+			</demo-item>
+
 			<demo-item :label="t('自定义样式')">
 				<cl-countdown
 					:hour="10"
@@ -56,7 +60,7 @@
 <script lang="ts" setup>
 import { t } from "@/locale";
 import DemoItem from "../components/item.uvue";
-import { ref } from "vue";
+import { onMounted, ref } from "vue";
 import { dayUts, isDark, parseClass } from "@/cool";
 import { useUi } from "@/uni_modules/cool-ui";
 
@@ -69,4 +73,12 @@ function onDone() {
 		message: "倒计时完成"
 	});
 }
+
+const countdownRef = ref<ClCountdownComponentPublicInstance | null>(null);
+
+onMounted(() => {
+	setTimeout(() => {
+		countdownRef.value!.next();
+	}, 3000);
+});
 </script>
diff --git a/uni_modules/cool-ui/components/cl-countdown/cl-countdown.uvue b/uni_modules/cool-ui/components/cl-countdown/cl-countdown.uvue
index c1fd041..2be0d89 100644
--- a/uni_modules/cool-ui/components/cl-countdown/cl-countdown.uvue
+++ b/uni_modules/cool-ui/components/cl-countdown/cl-countdown.uvue
@@ -14,7 +14,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, watch, nextTick, onBeforeUnmount, onBeforeMount, computed, type PropType } from "vue";
+import { ref, watch, nextTick, computed, type PropType, onMounted, onUnmounted } from "vue";
 import type { PassThroughProps } from "../../types";
 import { dayUts, get, has, isEmpty, parsePt } from "@/cool";
 
@@ -71,6 +71,11 @@ const props = defineProps({
 	datetime: {
 		type: [Date, String] as PropType<Date | string>,
 		default: null
+	},
+	// 是否自动开始倒计时
+	auto: {
+		type: Boolean,
+		default: true
 	}
 });
 
@@ -267,36 +272,43 @@ function start(options: Options | null = null) {
 		});
 
 		// 开始倒计时
-		next();
+		if (props.auto) {
+			next();
+		} else {
+			countDown();
+		}
 	});
 }
 
-// 监听时间单位变化，重新开始倒计时
-watch(
-	computed(() => [props.day, props.hour, props.minute, props.second] as number[]),
-	() => {
-		start();
-	}
-);
-
-// 监听结束时间变化，重新开始倒计时
-watch(
-	computed(() => props.datetime),
-	() => {
-		start();
-	}
-);
-
 // 组件销毁前停止倒计时
-onBeforeUnmount(() => stop());
+onUnmounted(() => stop());
 
 // 组件挂载前开始倒计时
-onBeforeMount(() => start());
+onMounted(() => {
+	start();
+
+	// 监听时间单位变化，重新开始倒计时
+	watch(
+		computed(() => [props.day, props.hour, props.minute, props.second] as number[]),
+		() => {
+			start();
+		}
+	);
+
+	// 监听结束时间变化，重新开始倒计时
+	watch(
+		computed(() => props.datetime),
+		() => {
+			start();
+		}
+	);
+});
 
 defineExpose({
 	start,
 	stop,
 	done,
+	next,
 	isRunning
 });
 </script>
diff --git a/uni_modules/cool-ui/components/cl-countdown/props.ts b/uni_modules/cool-ui/components/cl-countdown/props.ts
index 6a0c2d1..32682f2 100644
--- a/uni_modules/cool-ui/components/cl-countdown/props.ts
+++ b/uni_modules/cool-ui/components/cl-countdown/props.ts
@@ -16,4 +16,5 @@ export type ClCountdownProps = {
 	minute?: number;
 	second?: number;
 	datetime?: Date | string;
+	auto?: boolean;
 };