Element UI MessageBox 欄位輸入後按下 Enter 會直接觸發確定按鈕的問題|Vue 2.x|Element UI 2.15.x|伊恩踩坑筆記
Apr 2, 2024
在 MessageBox 元件中的 $confirm
,將 showInput
設為 true
,並增加 beforeClose
...
showInput: true,
beforeClose: (action, instance, done) => {
if (action === "confirm") {
instance.$refs["confirm"].$el.onclick = (function (e) {
e = e || window.event;
if (e.detail !== 0) {
done();
}
})();
} else {
done();
}
},
這樣當你在欄位中輸入字串後按下 Enter,就不會直接 Submit
,而是會變成需要手動按下「確定」才會 Submit
如果要 Submit
前檢查欄位是否有值,否則不關閉彈框,可以這樣做
...
showInput: true,
beforeClose: (action, instance, done) => {
if (action === "confirm") {
const _this = this;
instance.$refs["confirm"].$el.onclick = (function (e) {
e = e || window.event;
if (e.detail !== 0) {
// 檢查欄位有沒有輸入值
if (!instance.inputValue) {
return _this.$notify.error("請輸入!");
}
done();
}
})();
} else {
// 按下取消的時候觸發
done();
}
},
參考來源
关于ElementUI中MessageBox弹框的取消键盘触发事件(enter,esc)关闭弹窗(执行事件)的解决方法
ING Design 応設計
https://www.theingdesign.com/