Question

对于Sweet Alert 2弹出式确认窗口，如果我将属性“ allowEnterKey”设置为true（这是默认值），则确认按钮会在窗口弹出时自动聚焦。此外，此按钮的颜色将不同于其常规颜色（例如，未聚焦或按下时的颜色）

另一方面，如果我将“ allowEnterKey”设置为false，则此按钮将不会突出显示，并且颜色将是其常规颜色。但是用户将无法通过按Enter键关闭窗口，这对我来说并不理想。

那么，如何在聚焦按钮时将其颜色更改为常规颜色？

A sample pop-up confirmation window, where the button is highlighted and grey instead of its regular color blue

Answer 1

documentation指定颜色选项：confirmButtonColor和cancelButtonColor。

swal({
  title: 'Are you sure?',
  text: "You won't be able to revert this!",
  type: 'warning',
  showCancelButton: true,
  confirmButtonColor: '#3085d6',
  cancelButtonColor: '#d33',
  confirmButtonText: 'Yes, delete it!'
}).then((result) => {
  if (result.value) {
    swal(
      'Deleted!',
      'Your file has been deleted.',
      'success'
    )
  }
})

如果这还不够，您还可以应用自定义CSS类，例如：

confirmButtonClass: 'btn btn-success',
cancelButtonClass: 'btn btn-danger',

如何在Sweet Alert 2中更改焦点/按下按钮的颜色？

1 个答案: