iter(g218): 未选值时两列停在此刻
This commit is contained in:
+2
-2
@@ -1,6 +1,6 @@
|
|||||||
# @ui-arch 组件库 Agent 文档(无图形版)
|
# @ui-arch 组件库 Agent 文档(无图形版)
|
||||||
|
|
||||||
> 自动生成于 2026-10-26T11:56:46.981Z,数据源:各包 ua.manifest.json,勿手改。人类版文档站:apps/docs/index.html。
|
> 自动生成于 2026-10-26T11:59:09.023Z,数据源:各包 ua.manifest.json,勿手改。人类版文档站:apps/docs/index.html。
|
||||||
> 组件 = 普通函数,传 props 返回 DOM;状态用 signal 双向绑定:读 signal() 写 signal(v)。
|
> 组件 = 普通函数,传 props 返回 DOM;状态用 signal 双向绑定:读 signal() 写 signal(v)。
|
||||||
|
|
||||||
## 快速上手
|
## 快速上手
|
||||||
@@ -2008,7 +2008,7 @@ const at = signal('09:30'); timePicker({ value: at, minuteStep: 15, onChange: (t
|
|||||||
手把手:
|
手把手:
|
||||||
|
|
||||||
1. 创建信号 at = signal('09:30') 并传入 value:组件读它显示、选完写回,双向绑定
|
1. 创建信号 at = signal('09:30') 并传入 value:组件读它显示、选完写回,双向绑定
|
||||||
2. 点触发器展开时 / 分两列,当前值所在格高亮并自动滚到列中部,不必手动找
|
2. 点触发器展开时 / 分两列:当前值所在格高亮并自动滚到列中部;还没选过时停在此刻(当前小时 / 当前分钟档),打开即可就近选
|
||||||
3. 先点时列定小时(分默认落到首个步长值,值立刻可用),再点分列即完成并收起,焦点回到触发器
|
3. 先点时列定小时(分默认落到首个步长值,值立刻可用),再点分列即完成并收起,焦点回到触发器
|
||||||
4. 列内可用 ↑↓ 环形移动、Home/End 直达首末;Tab、Esc、点击外部都能正常进出与收起
|
4. 列内可用 ↑↓ 环形移动、Home/End 直达首末;Tab、Esc、点击外部都能正常进出与收起
|
||||||
5. 需要 15 分钟一档就传 minuteStep: 15,步长只影响分列的可选值,时列始终 24 档
|
5. 需要 15 分钟一档就传 minuteStep: 15,步长只影响分列的可选值,时列始终 24 档
|
||||||
|
|||||||
@@ -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);
|
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 reveal = (col: HTMLElement, cells: HTMLButtonElement[], fallback: number) => {
|
||||||
const cell = cells.find((el) => el.classList.contains('is-active'));
|
const at = cells.findIndex((el) => el.classList.contains('is-active'));
|
||||||
if (!cell) return; // 卫语句:还没选过,停在列首
|
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; // 居中,上下都留出邻近项
|
const target = cell.offsetTop - (col.clientHeight - cell.offsetHeight) / 2; // 居中,上下都留出邻近项
|
||||||
col.scrollTop = Math.max(0, target);
|
col.scrollTop = Math.max(0, target);
|
||||||
};
|
};
|
||||||
@@ -127,7 +128,11 @@ export function timePicker(props: TimePickerProps): HTMLElement {
|
|||||||
effect(() => {
|
effect(() => {
|
||||||
if (open()) {
|
if (open()) {
|
||||||
releaseEsc ??= pushOverlay(() => { open(false); trigger.focus(); }); // 入 Esc 栈:与弹窗/抽屉共用逐层关闭
|
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 {
|
} else {
|
||||||
releaseEsc?.();
|
releaseEsc?.();
|
||||||
releaseEsc = null;
|
releaseEsc = null;
|
||||||
|
|||||||
@@ -3693,7 +3693,7 @@
|
|||||||
"example": "const at = signal('09:30'); timePicker({ value: at, minuteStep: 15, onChange: (t) => toast.info(`定在 ${t}`) })",
|
"example": "const at = signal('09:30'); timePicker({ value: at, minuteStep: 15, onChange: (t) => toast.info(`定在 ${t}`) })",
|
||||||
"steps": [
|
"steps": [
|
||||||
"创建信号 at = signal('09:30') 并传入 value:组件读它显示、选完写回,双向绑定",
|
"创建信号 at = signal('09:30') 并传入 value:组件读它显示、选完写回,双向绑定",
|
||||||
"点触发器展开时 / 分两列,当前值所在格高亮并自动滚到列中部,不必手动找",
|
"点触发器展开时 / 分两列:当前值所在格高亮并自动滚到列中部;还没选过时停在此刻(当前小时 / 当前分钟档),打开即可就近选",
|
||||||
"先点时列定小时(分默认落到首个步长值,值立刻可用),再点分列即完成并收起,焦点回到触发器",
|
"先点时列定小时(分默认落到首个步长值,值立刻可用),再点分列即完成并收起,焦点回到触发器",
|
||||||
"列内可用 ↑↓ 环形移动、Home/End 直达首末;Tab、Esc、点击外部都能正常进出与收起",
|
"列内可用 ↑↓ 环形移动、Home/End 直达首末;Tab、Esc、点击外部都能正常进出与收起",
|
||||||
"需要 15 分钟一档就传 minuteStep: 15,步长只影响分列的可选值,时列始终 24 档",
|
"需要 15 分钟一档就传 minuteStep: 15,步长只影响分列的可选值,时列始终 24 档",
|
||||||
|
|||||||
Reference in New Issue
Block a user