Element UI MessageBox 欄位輸入後按下 Enter 會直接觸發確定按鈕的問題｜Vue 2.x｜Element UI 2.15.x｜伊恩踩坑筆記

在 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/