iter(g345): 提交按钮补忙碌态与 aria-busy
This commit is contained in:
@@ -1,4 +1,4 @@
|
||||
import { effect, h } from '@ui-arch/frame';
|
||||
import { effect, h, signal } from '@ui-arch/frame';
|
||||
import { button } from './button.js';
|
||||
import { checkRule, checkRuleAsync } from './formRules.js';
|
||||
import { grid } from './grid.js';
|
||||
@@ -124,7 +124,8 @@ export function form(props: FormProps, items: FormItemHandle[]): HTMLElement {
|
||||
summary.textContent = '';
|
||||
props.onReset?.();
|
||||
};
|
||||
const submitBtn = button({ label: props.submitText ?? '提交', type: 'submit' }) as HTMLButtonElement; // 走原生 submit,避免 click + submit 双触发
|
||||
const busy = signal(false); // 校验进行中:按钮转圈 + aria-busy,异步规则跑 400ms 时用户看得见在等
|
||||
const submitBtn = button({ label: props.submitText ?? '提交', type: 'submit', loading: busy }) as HTMLButtonElement; // 走原生 submit,避免 click + submit 双触发
|
||||
const resetBtn = props.resetText ? button({ label: props.resetText, variant: 'ghost', type: 'button', onClick: doReset }) : null; // 重置不得提交表单
|
||||
const actions = h('div', { class: 'ua-form-actions' }, submitBtn, resetBtn);
|
||||
let running = false; // 提交中标记:异步校验期间屏蔽重复提交
|
||||
@@ -133,7 +134,7 @@ export function form(props: FormProps, items: FormItemHandle[]): HTMLElement {
|
||||
const submit = async (): Promise<void> => {
|
||||
if (running) return; // 卫语句:上一轮异步校验还没结束
|
||||
running = true;
|
||||
submitBtn.disabled = true; // 校验期间禁用,避免连点重复提交
|
||||
busy(true); // loading 自带禁点,不必再手写 disabled(两处都设反而容易漏复位)
|
||||
let firstBad: HTMLElement | null = null;
|
||||
let bad = 0; // 不通过的字段数
|
||||
for (const item of items) {
|
||||
@@ -145,7 +146,7 @@ export function form(props: FormProps, items: FormItemHandle[]): HTMLElement {
|
||||
if (!target) item.el.tabIndex = -1; // 整块无可聚焦控件时把字段容器本身设为焦点落点(-1 不进 Tab 序,只接受程序聚焦)
|
||||
firstBad = target ?? item.el;
|
||||
}
|
||||
submitBtn.disabled = false;
|
||||
busy(false);
|
||||
running = false;
|
||||
summary.hidden = bad === 0;
|
||||
summary.textContent = bad ? `有 ${bad} 项需要修改,已定位到第一处` : '';
|
||||
|
||||
@@ -1853,7 +1853,7 @@
|
||||
{
|
||||
"n": "submitText",
|
||||
"t": "string",
|
||||
"d": "提交按钮文案;缺省「提交」"
|
||||
"d": "提交按钮文案;缺省「提交」。异步规则校验期间按钮转圈并禁点(aria-busy),跑 400ms 的远程校验也看得见在等"
|
||||
},
|
||||
{
|
||||
"n": "resetText",
|
||||
|
||||
Reference in New Issue
Block a user