iter(g236): 新增 countdown 倒计时组件,秒级递减自动停表并带句柄控制(73 组件)
This commit is contained in:
@@ -0,0 +1,27 @@
|
||||
import { h, signal } from '@ui-arch/frame';
|
||||
import type { CountdownHandle, CountdownProps } from './types.js';
|
||||
|
||||
/*** 倒计时:秒级递减到 0 自动停表并触发 onFinish,缺省 mm:ss 展示,句柄可 start / stop / reset ***/
|
||||
export function countdown(props: CountdownProps): CountdownHandle {
|
||||
const remain = signal(props.seconds); // 剩余秒数(单一来源,h() 函数型子节点响应式刷新文本)
|
||||
let timer = 0; // setInterval 句柄(0 表示停表中)
|
||||
const fmt = props.format ?? ((s: number): string => `${String(Math.floor(s / 60)).padStart(2, '0')}:${String(s % 60).padStart(2, '0')}`); // 缺省 mm:ss 两位补零
|
||||
|
||||
const stop = (): void => { if (timer) { clearInterval(timer); timer = 0; } }; // 停表并清句柄,幂等
|
||||
|
||||
/*** 开始 / 续跑:重入先停旧表;已归零时视为重开一轮 ***/
|
||||
const start = (): void => {
|
||||
stop();
|
||||
if (remain() <= 0) remain(props.seconds);
|
||||
timer = window.setInterval(() => {
|
||||
const next = Math.max(0, remain() - 1);
|
||||
remain(next);
|
||||
if (next <= 0) { stop(); if (props.onFinish) props.onFinish(); } // 归零即停表并回调,不留负数帧
|
||||
}, 1000);
|
||||
};
|
||||
|
||||
const reset = (): void => { stop(); remain(props.seconds); }; // 复位到总时长并停表
|
||||
const el = h('span', { class: 'ua-countdown', role: 'timer' }, () => fmt(remain())) as HTMLSpanElement;
|
||||
if (props.running ?? true) start(); // 缺省挂载即开始
|
||||
return { el, start, stop, reset };
|
||||
}
|
||||
@@ -72,3 +72,4 @@ export { commandPalette } from './commandPalette.js';
|
||||
export { timePicker } from './timePicker.js';
|
||||
export { pinInput } from './pinInput.js';
|
||||
export { copyButton } from './copyButton.js';
|
||||
export { countdown } from './countdown.js';
|
||||
|
||||
@@ -265,6 +265,22 @@ export interface CopyButtonProps {
|
||||
onCopied?: (text: string) => void; // 复制成功回调(参数为实际写入的内容)
|
||||
}
|
||||
|
||||
/*** 倒计时入参 ***/
|
||||
export interface CountdownProps {
|
||||
seconds: number; // 总时长(秒),> 0
|
||||
running?: boolean; // 创建即开始倒数;缺省 true
|
||||
format?: (seconds: number) => string; // 展示格式化;缺省 mm:ss 两位补零
|
||||
onFinish?: () => void; // 归零回调(自动停表后触发)
|
||||
}
|
||||
|
||||
/*** 倒计时句柄 ***/
|
||||
export interface CountdownHandle {
|
||||
el: HTMLSpanElement; // 根节点(role=timer,文本随剩余秒数响应式刷新)
|
||||
start: () => void; // 开始 / 续跑(已归零则重开一轮)
|
||||
stop: () => void; // 暂停(保留剩余秒数)
|
||||
reset: () => void; // 复位到总时长并停表
|
||||
}
|
||||
|
||||
/*** 空状态入参 ***/
|
||||
export interface EmptyProps {
|
||||
title?: string; // 主标题;缺省不渲染
|
||||
|
||||
Reference in New Issue
Block a user