iter(g218): 未选值时两列停在此刻
This commit is contained in:
@@ -108,10 +108,11 @@ export function timePicker(props: TimePickerProps): HTMLElement {
|
||||
);
|
||||
const root = h('div', { class: () => `ua-timepicker${open() ? ' is-open' : ''}${props.clearable && value() ? ' has-clear' : ''}` }, trigger, clearable ? clearBtn : null, pop);
|
||||
|
||||
/*** 把激活格滚到列中部:列是独立滚动容器,直接算 scrollTop 不惊动页面 ***/
|
||||
const reveal = (col: HTMLElement, cells: HTMLButtonElement[]) => {
|
||||
const cell = cells.find((el) => el.classList.contains('is-active'));
|
||||
if (!cell) return; // 卫语句:还没选过,停在列首
|
||||
/*** 把目标格滚到列中部:优先当前值所在格,还没选过时退到「此刻」的格,打开即可就近选 ***/
|
||||
const reveal = (col: HTMLElement, cells: HTMLButtonElement[], fallback: number) => {
|
||||
const at = cells.findIndex((el) => el.classList.contains('is-active'));
|
||||
const cell = cells[at >= 0 ? at : Math.min(Math.max(fallback, 0), cells.length - 1)];
|
||||
if (!cell) return; // 卫语句:空列(步长异常)不滚
|
||||
const target = cell.offsetTop - (col.clientHeight - cell.offsetHeight) / 2; // 居中,上下都留出邻近项
|
||||
col.scrollTop = Math.max(0, target);
|
||||
};
|
||||
@@ -127,7 +128,11 @@ export function timePicker(props: TimePickerProps): HTMLElement {
|
||||
effect(() => {
|
||||
if (open()) {
|
||||
releaseEsc ??= pushOverlay(() => { open(false); trigger.focus(); }); // 入 Esc 栈:与弹窗/抽屉共用逐层关闭
|
||||
requestAnimationFrame(() => { reveal(hourCol.col, hourCol.buttons); reveal(minuteCol.col, minuteCol.buttons); }); // 布局就绪后再量
|
||||
requestAnimationFrame(() => {
|
||||
const now = new Date(); // 未选值时的锚点:打开就停在「此刻」附近,省得从 00:00 开始翻
|
||||
reveal(hourCol.col, hourCol.buttons, now.getHours());
|
||||
reveal(minuteCol.col, minuteCol.buttons, Math.floor(now.getMinutes() / step));
|
||||
}); // 布局就绪后再量
|
||||
} else {
|
||||
releaseEsc?.();
|
||||
releaseEsc = null;
|
||||
|
||||
Reference in New Issue
Block a user