javascript - SweetAlert2 - 如果是一个按钮，它会在模式打开后立即突出显示

Question

我刚刚从使用 SweetAlert 更改为 SweetAlert 2。花了一段时间来解决问题，但我实现了我想要的，除了一件事。

一旦我打开模式，如果有 1 个按钮并且没有输入等，按钮就会像这样突出显示：

有没有办法在进行任何交互按钮之前阻止它突出显示？

---

更新：

Answer 1

只需将此代码添加到您的CSS中

button.swal2-styled {
    outline: none;
}

Answer 2

请在下面的代码段中找到在打开 Sweetalert 之前有一个函数会调用，您可以在其中执行一些您需要的操作，例如停止突出显示按钮或其他操作。

有关更多信息和更多事件，如 OnClose 等。请找到此链接并找到配置部分

我希望它会帮助你。

swal({
  title: 'Alert!',
  text: 'Heyyyyyyyyyyyyyy',
  onOpen:OnOpenFunction(),
  confirmButtonClass:"btn-disable",
  buttonsStyling:true
})

function OnOpenFunction()
{
     //Stop Highlighting your button etc..
	 //alert("On Before Open Model Event!!!!!");
}

.btn-disable
        {
        cursor: not-allowed;
        pointer-events: none;
        outline: none;
        /*Button disabled - CSS color class*/
        color: #c0c0c0;
        background-color: #ffffff;

        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/sweetalert2/6.3.2/sweetalert2.min.js"></script>
<link href="https://cdn.jsdelivr.net/sweetalert2/6.3.2/sweetalert2.min.css" rel="stylesheet"/>

Answer 3

@Badal 提到的解决方案正在运行，但它依赖于内部插件类，这很糟糕。

更好的解决方案是使用以下confirmButtonClass选项：

.no-outline {
  outline: none;
}

然后将该类传递给confirmButtonClass选项：

swal({
  ...
  confirmButtonClass: 'no-outline',
  ...
})