如何解决ElementUI中MessageBox.confirm()默认不聚焦难题

文
章
目
录

用ElementUI的MessageBox.confirm()时，不少开发者都碰到过一个让人头疼的问题：弹窗弹出来后，默认确认按钮是浅色的，得手动点击一下，按钮才会变成正常状态，也就是存在默认不聚焦的情况。这在一定程度上影响了用户体验，今天咱们就来聊聊怎么解决这个问题。

一、问题表现及影响

在实际项目场景中，当使用MessageBox.confirm()弹出确认框时，用户会发现确认按钮初始状态并不像预期那样处于聚焦状态。这就导致用户操作时，不能直接通过回车键来确认操作，必须先点击一下确认按钮，才能让它进入可操作的正常状态，这无疑增加了用户的操作步骤，降低了操作的流畅性。

二、解决方案

针对这个问题，我们可以通过创建一个新组件来实现聚焦功能，以此替换默认的MessageBox.confirm()。具体操作步骤如下：

创建新组件：在项目的components目录下，新建MessageBoxConfirmWrapper/index.js文件。在这个文件里，编写如下代码：

import { MessageBox } from 'element-ui'

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

这段代码的关键在于setTimeout(() => { document.activeElement?.blur(); }, 0)这部分。setTimeout函数会延迟执行里面的代码，延迟时间设置为0，意味着它会在当前调用栈清空后立即执行。document.activeElement?.blur()的作用是让当前处于激活状态的元素失去焦点，这样做的目的是为了后续MessageBox.confirm()弹出的确认框能够正确聚焦到确认按钮上。最后，返回MessageBox.confirm(...args)，确保新组件能够正常使用MessageBox.confirm()的功能。
2. 使用新组件：在需要使用确认框的地方，引入并使用这个新组件。例如：

import MessageBoxConfirmWrapper from '@/components/MessageBoxConfirmWrapper'
MessageBoxConfirmWrapper('确定要退出当前账号？', '退出确认', { 
    type: 'warning'
})
.then(() => {})
.catch(() => {})

引入MessageBoxConfirmWrapper组件后，使用方式和原来的MessageBox.confirm()基本一致，只是将原来的调用换成了对新组件的调用。在弹出确认框时，就不会再出现默认不聚焦的问题了。

通过上述方法，成功解决了ElementUI中MessageBox.confirm()默认不聚焦的问题。希望这个解决方案能帮助大家在项目开发中避免这类问题带来的困扰，提升用户体验。如果在实践过程中遇到其他问题，欢迎一起交流探讨。