1
关注
443
浏览

低代码平台前端组件事件如何设置

查看全部 1 个回答

周海涛 超级管理员 用户来自于: 运营商级NAT
2023-08-15 09:34

设计器中对有交互功能的组件提供了不同的事件。

开发者可以根据实际应用场景对组件进行事件的拓展。


获取焦点

通常用于输入框组件中,顾名思义在输入框获取焦点的时候触发 foucs

失去焦点

通常用于输入框组件中,顾名思义在输入框失去焦点的时候触发 blur

值发生变化

值或者组件状态发生变化时候触发改功能 。 change

函数的第二个参数就是返回的值或者返回对状态。

例如 输入框或者下拉框的值发生了变化 就会触发该事件

例如 tab标签页面 选择tab状态发生变化也会触发该事件

点击事件

通常用于按钮点击事件 click ,或者菜单tree row 点击事件 工序图节点 点击事件

该事件触发时机在按钮默认事件之后触发,如果按钮的默认事件报错或者阻塞了,该事件不会触发。

例如 按钮类型是提交表单并且绑定了点击事件,假如点击按钮的时候表单验证没有通过则不会执行拓展的事件。

表单提交前

通常用于按钮点击事件 click 。

该事件和点击事件不同之处在于,它优先于按钮的默认事件,如果改事件返回Promise.reject() 还可以阻塞按钮的默认事件执行。

例如 按钮类型是提交表单并且绑定了点击事件,假如该事件调用的一个异步接口返回了Promise.reject()则后续逻辑不会被执行。

注意:在该事件内执行了router.back() 等页面跳转事件时候 后续逻辑也不会执行。

文件导入前

在文件导入之前做一些事

//可以通过在values上添加属性改变接口属性
export function beforeupload(context,values) {
values.id=123
values.name='name'
// 如果返回Promise.reject导出被终止
return Promise.reject()
}

例如 按钮类型是提交表单并且绑定了点击事件,假如该事件调用的一个异步接口返回了Promise.reject()则后续逻辑不会被执行。

点击表格行

通常用于表格row点击事件触发 。

表格重置

通常用于点击表格重置按钮时事件触发

表单校验

组件值异步校验专用方法,表单内专用。

例如需要对输入框的值进行一个接口教研,只要不是返回Promise.reject() 就认为表单校验通过 ,报错信息可以放在Promise.reject(message) 内。

例 一个对输入框数字异步校验的方法。

export function reg(context,v) {
return new Promise((resolve,reject)=>{
setTimeout(()=>{
if(v>10){
reject('数子太大了')
}else{
resolve()
}
},2000)
})
}


关于作者

问题动态

发布时间
2023-08-15 09:33
更新时间
2023-08-15 09:34

相关问题

低代码平台如何查询错误日志信息
低代码应用打包后下载按钮是灰的无法点击
低代码应用部署后遇到性能问题怎么办
低代码平台pc端和app端页面生命周期函数分别是什么
低代码平台前端如何自定义查询条件
低代码平台前端表格组件如何在页面初始化时设置默认选中值
低代码平台前端请求后端如何设置超时时间
干将低代码平台到处大数据量数据内存不释放怎么处理
没有看到设备管理模块的低代码配置
普通人怎么学习低代码?