iter(g40): 修表单双提交并支持 Enter 提交

This commit is contained in:
HIsheR
2026-10-26 11:51:41 +08:00
parent 78779d7bb6
commit d685f66527
8 changed files with 45 additions and 13 deletions
+1 -1
View File
@@ -5,7 +5,7 @@ import type { ButtonProps } from './types.js';
export function button(props: ButtonProps): HTMLElement {
return h(
'button',
{ class: `ua-btn ua-btn-${props.variant ?? 'primary'}`, disabled: props.disabled, onClick: props.onClick }, // false/undefined 移除属性,Signal 走响应式
{ class: `ua-btn ua-btn-${props.variant ?? 'primary'}`, type: props.type ?? 'button', disabled: props.disabled, onClick: props.onClick }, // 缺省 button:表单内不隐式提交
props.label,
);
}
+8 -2
View File
@@ -71,8 +71,8 @@ export function form(props: FormProps, items: FormItemHandle[]): HTMLElement {
}
props.onSubmit?.();
};
const submitBtn = button({ label: props.submitText ?? '提交', onClick: submit });
const resetBtn = props.resetText ? button({ label: props.resetText, variant: 'ghost', onClick: props.onReset }) : null;
const submitBtn = button({ label: props.submitText ?? '提交', type: 'submit' }); // 走原生 submit,避免 click + submit 双触发
const resetBtn = props.resetText ? button({ label: props.resetText, variant: 'ghost', type: 'button', onClick: props.onReset }) : null; // 重置不得提交表单
const actions = h('div', { class: 'ua-form-actions' }, submitBtn, resetBtn);
const el = h(
'form',
@@ -84,5 +84,11 @@ export function form(props: FormProps, items: FormItemHandle[]): HTMLElement {
e.preventDefault(); // 拦截原生提交,走校验流程
submit();
});
el.addEventListener('keydown', (e) => {
if (e.key !== 'Enter' || e.target instanceof HTMLTextAreaElement) return; // 多行输入框允许换行
if (!(e.target instanceof HTMLInputElement)) return; // 只接管单行输入框
e.preventDefault(); // 拦下浏览器隐式提交,统一走校验
submit();
});
return el;
}
+1
View File
@@ -22,6 +22,7 @@ export interface PopoverProps {
export interface ButtonProps {
label: string; // 按钮文案
variant?: 'primary' | 'ghost' | 'danger'; // 视觉强度;缺省 primary
type?: 'button' | 'submit' | 'reset'; // 原生类型;缺省 button(表单内不会意外触发提交)
disabled?: boolean | Signal<boolean>; // 禁用态:布尔直接置位,传信号则动态同步
onClick?: () => void; // 点击回调
}