通过 actions.events.patchAsync 绑定原生 DOM 事件:
⚠️ 每个键的值是一个接收 field 、返回事件处理函数的柯里化函数:(field) => (event) => {...},内层返回的函数才会真正被绑定到 DOM 事件上;不需要 field 时忽略第一个参数即可(示例中的 click: (field) => (event) => {...})。
事件绑定在字段组件的宿主元素上:V1 组件自动支持;V2(static __version = 2,selectorless)组件需要手动设置 events。
events.definition.ts
import * as v from 'valibot';
import { actions, NFCSchema, setComponent } from '@piying/view-angular-core';
import { appendLog } from '../components/log';
export const schema = v.pipe(
v.object({
input: v.pipe(
v.string(),
// V1 控件:events 会自动绑定到宿主元素
setComponent('simpleInput'),
actions.inputs.set({ placeholder: '点我,或在此输入后按 Enter' }),
actions.events.patchAsync({
click: (field) => () => {
return appendLog(field, 'click 触发');
},
keydown: (field) => (event: KeyboardEvent) => {
if (event.key === 'Enter') {
appendLog(field, 'Enter 触发');
}
},
}),
),
__log: v.pipe(
NFCSchema,
setComponent('log'),
actions.inputs.set({ logs: [] }),
),
}),
setComponent('fieldset'),
);