vue中在弹框中使用form表单,取消默认的回车提交效果-刷新页面

前言:

        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 = ""

你可能感兴趣的:(vue.js,javascript,前端)