element-ui MessageBox.confirm 取消自动聚焦

在使用 element-ui 的 MessageBox.confirm 方法时，你可能注意到一个细节：当确认框弹出时，确认按钮会自动获得焦点。虽然这种设计在大多数情况下是合理的，但有时我们可能不希望出现这种自动聚焦的行为。

解决方案

我们可以通过简单的包装来解决这个问题。以下是实现代码：

TypeScript

import { MessageBox } from 'element-ui';
import { ElMessageBoxOptions } from 'element-ui/types/message-box'

export const MessageBoxConfirmWrapper = (...args: [string, string, ElMessageBoxOptions?]) => {
    setTimeout(() => {
        (document.activeElement as HTMLElement)?.blur();
    }, 0);
    return MessageBox.confirm(...args);
}

JavaScript

import { MessageBox } from 'element-ui';

export const MessageBoxConfirmWrapper = (...args) => {
    setTimeout(() => {
        document.activeElement?.blur();
    }, 0);
    return MessageBox.confirm(...args);
}

使用方法

在main.ts或main.js注册完element-ui后，手动进行覆盖

Vue.use(ElementUI, { size: "medium" });

// 覆盖element-ui的MessageBox.confirm方法
Vue.prototype.$confirm = MessageBoxConfirmWrapper;

原理解释

这个解决方案利用了 JavaScript 的事件循环机制。通过 setTimeout 将移除焦点的操作放到下一个事件循环中执行，可以确保在 MessageBox 完成渲染并设置焦点之后再移除焦点。