cl-countdown 添加 auto 参数

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>

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) {
 		});
 
 		// 开始倒计时
+		if (props.auto) {
 			next();
+		} else {
+			countDown();
+		}
 	});
 }
 
-// 监听时间单位变化，重新开始倒计时
+// 组件销毁前停止倒计时
-watch(
+onUnmounted(() => stop());
+
+// 组件挂载前开始倒计时
+onMounted(() => {
+	start();
+
+	// 监听时间单位变化，重新开始倒计时
+	watch(
 		computed(() => [props.day, props.hour, props.minute, props.second] as number[]),
 		() => {
 			start();
 		}
-);
+	);
 
-// 监听结束时间变化，重新开始倒计时
+	// 监听结束时间变化，重新开始倒计时
-watch(
+	watch(
 		computed(() => props.datetime),
 		() => {
 			start();
 		}
-);
+	);
-
+});
-// 组件销毁前停止倒计时
-onBeforeUnmount(() => stop());
-
-// 组件挂载前开始倒计时
-onBeforeMount(() => start());
 
 defineExpose({
 	start,
 	stop,
 	done,
+	next,
 	isRunning
 });
 </script>

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;
 };