项目背景:点击按钮,查询本地数据库的密码是否为空,为空则弹出框输入密码,回车验证调后台接口
问题:项目重启后第一次点击按钮弹出弹框回车总是刷新页面 不执行指定方法
解决方法:el-form加上@submit.native.prevent就不会刷新了,真坑 太坑太坑了
<el-button type="text" @click="open">点击打开 Dialog</el-button>
<el-dialog
title="提示"
:visible.sync="dialogVisible"
width="30%"
:before-close="handleClose">
<el-form @submit.native.prevent :inline="true" :model="formInline" class="demo-form-inline">
<el-form-item label="审批人">
<el-input id="inputEnter" v-model="formInline.user" placeholder="审批人"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
</span>
</el-dialog>
export default {
data() {
return {
dialogVisible: false,
formInline: {
user: '',
region: ''
}
};
},
methods: {
open(){
this.dialogVisible=true
let enterDom = document.querySelector("#inputEnter")
enterDom.onkeyup=event=>{
if(event.keyCode=='13'){
console.log("回车事件 ")
}
}
},
onSubmit() {
console.log('submit!');
},
handleClose(done) {
this.$confirm('确认关闭?')
.then(_ => {
done();
})
.catch(_ => {});
}
}
};
``