前言:
vue项目中使用dialog弹框的时候,如果在弹框上使用form表单,但是我们只是使用他的input框,不需要它默认的提交功能的时候,会出现input聚焦,回车刷新页面,是因为他触发了默认的form提交方法。解决办法,可以js动态禁止回车,也可以去掉默认的提交。
优化该处功能方法:
1、动态给他添加回车禁止事件
打开弹框时挂载,关闭弹框时候取消
document.addEventListener('keydown', (event:Event)=>keyDownFun(event));// 关闭修改名字弹框
const closeEditNameDialog = ()=>{document.removeEventListener('keydown', (event:Event)=>keyDownFun(event));
}// 键盘事件-禁止回车
const keyDownFun = (event:any) =>{if (event.key === 'Enter') {event.preventDefault();}
}弹框上:
onClose={closeEditNameDialog}
@close="closeEditNameDialog"
2、取消默认的form表达的提交方法
el-form上
onSubmit={(e: Event)=>e.preventDefault()}
@submit = ""