iter(g20): inputNumber 长按连发步进

This commit is contained in:
HIsheR
2026-10-26 11:08:35 +08:00
parent 42a954cba2
commit 646fed92d5
7 changed files with 27 additions and 8 deletions
+12 -1
View File
@@ -3,7 +3,7 @@ import { button } from './button.js';
import { addonWrap } from './addons.js';
import type { InputNumberProps } from './types.js';
/*** 数字输入:−/+ 按钮 + 输入框三段式,value 信号双向绑定,min/max/step 超界自动夹取,键盘 ↑↓ 调节 ***/
/*** 数字输入:−/+ 按钮 + 输入框三段式,value 信号双向绑定,min/max/step 超界自动夹取,键盘 ↑↓ 调节,长按连发步进 ***/
export function inputNumber(props: InputNumberProps): HTMLElement {
const min = props.min ?? -Infinity; // 无下限缺省
const max = props.max ?? Infinity; // 无上限缺省
@@ -23,5 +23,16 @@ export function inputNumber(props: InputNumberProps): HTMLElement {
const inc = button({ label: '+', variant: 'ghost', disabled: props.disabled, onClick: () => emit(props.value() + step) });
dec.setAttribute('aria-label', '减少');
inc.setAttribute('aria-label', '增加');
// —— 长按连发:400ms 延迟后每 100ms 连续步进,松开 / 移出即停(单击行为不受影响) ——
let holdTimer = 0; // 长按首步延迟计时器
let repeatTimer = 0; // 连发重复计时器
const stopHold = (): void => { window.clearTimeout(holdTimer); window.clearInterval(repeatTimer); holdTimer = 0; repeatTimer = 0; }; // 停止连发
const hold = (dir: number): void => { // dir:-1 减 / 1 加
stopHold(); // 重复按下先清旧计时
holdTimer = window.setTimeout(() => { repeatTimer = window.setInterval(() => emit(props.value() + dir * step), 100); }, 400);
};
dec.addEventListener('pointerdown', () => hold(-1));
inc.addEventListener('pointerdown', () => hold(1));
['pointerup', 'pointerleave', 'pointercancel'].forEach((ev) => { dec.addEventListener(ev, stopHold); inc.addEventListener(ev, stopHold); }); // 任一中止事件都停
return addonWrap(h('div', { class: 'ua-input-number', role: 'group' }, dec, input, inc) as HTMLDivElement, props.prefix, props.suffix);
}