如何从此消息框/警报中删除按钮自动对焦？答案

【问题标题】：How to remove the button auto focus from this message box/alert?如何从此消息框/警报中删除按钮自动对焦？
【发布时间】：2020-01-27 06:22:46
【问题描述】：

我正在使用元素 ui 消息框进行警报。 vue中的那个组件在功能上是没有问题的。令人担忧的是，当警报弹出时，其中一个按钮会自动设置焦点。

请看附图。 messageBoxButtonFocusIssue

MessageBox.confirm('Some user message', 'Warning', {
  confirmButtonText: 'Yes',
  cancelButtonText: 'No',
  showClose: false,
  roundButton: true,
  type: 'warning'
})

有没有办法在加载警报时从按钮“是”中移除焦点。

【问题讨论】：

我怀疑你的问题是你不喜欢焦点风格。你可能可以用 CSS 修复。这是一个可访问性要求，当模式打开时，可以聚焦的元素是焦点。
试试这个：document.activeElement.blur()

标签： html vue.js bootstrap-4 element-ui

【解决方案1】：

我也没有找到任何解决方案，所以我尝试了以下替代方案：

import swal from sweetalert

swal({ title: 'Warning',
                    text: 'some user message',
                    icon: 'warning',
                    dangerMode: true,
                    buttons: {
                        cancel: {
                            text: 'No',
                            value: null,
                            visible: true,
                            className: 'btn btn-primary',
                            closeModal: true
                        },
                        confirm: {
                            text: 'Yes',
                            value: true,
                            visible: true,
                            className: 'btn btn-secondary',
                            closeModal: true
                        }
                    }
                })

【讨论】：