在使用 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 完成渲染并设置焦点之后再移除焦点。
