ElementUI中，一次性取消所有MessageBox弹框的键盘enter事件

问题描述

$alert，$confirm，$prompt 都支持键盘enter事件，如果一直按enter，弹框会一直弹出关闭，弹出关闭...，尤其涉及异步请求时，会触发多次异步请求。

解决方案

如果在每个MessageBox位置做屏蔽，代码重复率高，不易维护；

本方案直接通过扩展MessageBox插件的方式， 屏蔽键盘Enter事件；

// element-ui-plugin.js
import { MessageBox as ElMessageBox } from 'element-ui';

const MessageBox = {
    ...ElMessageBox,
    confirm(message, title, options) {
        return ElMessageBox.confirm(message, title, {
            ...options,
            beforeClose: (action, instance, done) => {
                 if (action === 'confirm') {
                    instance.$refs.confirm.$el.onclick = (() => {
                        const evt = e || window.event;
                        if (evt.detail !== 0) {
                            done();
                        }
                    })();
                }
            }
        })
    },
    // alert, prompt 同样处理
    ...
}

export default {
    install() {},
}


// main.js
...
import Vue from 'vue'
import App from './App.vue'

import ElementUIPlugin, { MessageBox } from './element-ui-plugin'
...

Vue.use(ElementUIPlugin);

Object.defineProperty(Vue.prototype, '$confirm', {
    value: MessageBox.confirm,
})
// alert, prompt 同样处理
...

new Vue({
    render: (h) => h(App),
}).$mount('#app');