iter(g40): 修表单双提交并支持 Enter 提交
This commit is contained in:
@@ -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,
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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; // 点击回调
|
||||
}
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
"api": {
|
||||
"entry": "src/index.ts",
|
||||
"exports": [
|
||||
"button(props):按钮,variant = primary | ghost | danger,disabled 支持布尔或信号禁用",
|
||||
"button(props):按钮,variant = primary | ghost | danger,disabled 支持布尔或信号禁用;type 缺省 button(表单内不隐式提交)",
|
||||
"textField(props):文本输入,value 信号双向绑定,disabled 支持布尔或信号,onInput 输入回调;prefix/suffix 可选渲染为输入框内侧附加块,clearable 开启后有值即显一键清空按钮",
|
||||
"inputNumber(props):数字输入,−/+ 按钮与键盘 ↑↓ 调节(长按连发步进),min/max/step 夹取;prefix/suffix 可选渲染为整组前后附加块",
|
||||
"textarea(props):多行输入,value 信号双向绑定,disabled 支持布尔或信号,rows 控行数;prefix/suffix 可选渲染为上下附加块,maxCount 显示实时字数并设原生上限",
|
||||
@@ -169,6 +169,11 @@
|
||||
"d": "视觉强度;缺省 primary",
|
||||
"df": "primary"
|
||||
},
|
||||
{
|
||||
"n": "type",
|
||||
"t": "'button' | 'submit' | 'reset'",
|
||||
"d": "原生类型;缺省 button,表单内不会意外提交"
|
||||
},
|
||||
{
|
||||
"n": "disabled",
|
||||
"t": "boolean | Signal<boolean>",
|
||||
@@ -185,7 +190,8 @@
|
||||
"steps": [
|
||||
"确定语义强度:主操作用 primary(默认),次要操作用 ghost,危险操作用 danger",
|
||||
"绑定 onClick 回调处理点击逻辑",
|
||||
"需要禁用态时自行在回调首行卫语句判断,或外层包条件渲染"
|
||||
"需要禁用态时自行在回调首行卫语句判断,或外层包条件渲染",
|
||||
"放进 <form> 里需要提交时显式传 type: \"submit\";缺省 button 不会触发原生提交"
|
||||
]
|
||||
},
|
||||
{
|
||||
@@ -1410,7 +1416,8 @@
|
||||
"规则语义:required 非空(trim)、min/max 长度、pattern 正则、validator 自定义(true 通过 / 字符串为错误)",
|
||||
"非必填字段为空时跳过其余规则;Enter 键触发表单原生 submit(已拦截走校验流程)",
|
||||
"错误态覆盖包裹式控件:标红作用于控件根与内部原生控件(含自绘 select 的触发器),并同步 aria-invalid,读屏与视觉一致",
|
||||
"触发时机用 input / change / focusout(均会冒泡),因此 checkbox / select / 单选组这类包裹式控件同样能失焦校验"
|
||||
"触发时机用 input / change / focusout(均会冒泡),因此 checkbox / select / 单选组这类包裹式控件同样能失焦校验",
|
||||
"单行输入框内按 Enter 等同点击提交(textarea 内仍是换行);提交按钮为 type=\"submit\",不会与点击回调重复触发"
|
||||
]
|
||||
},
|
||||
{
|
||||
|
||||
Reference in New Issue
Block a user