在使用 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 完成渲染并设置焦点之后再移除焦点。
标签:...,MessageBox,confirm,args,element,ui From: https://www.cnblogs.com/azoux/p/18531730