如何从按钮中删除类并在sweetalert2中添加自定义类？

Question

我正在使用 sweetalert2 插件。它工作正常，但现在我想删除按钮类并添加我自己的类。

class=swal2-confirm swal2-styled但我需要class=swal2-confirm btn btn-success

任何解决方案表示赞赏！

 Swal.fire({
        title: 'Are you sure?',
        text: 'You will not be able to recover this imaginary file!',
        type: 'warning',
        showCancelButton: true,
        confirmButtonText: 'Yes, delete it!',
        cancelButtonText: 'No, keep it,'
    }).then((result) => {
        if (result.value) {
            Swal.fire(
                'Deleted!',
                'Your imaginary file has been deleted.',
                'success'
            )

        } else if (result.dismiss === Swal.DismissReason.cancel) {
            Swal.fire(
                'Cancelled',
                'Your imaginary file is safe :)',
                'error'
            )
        }
    })

Answer 1

您可以使用customClass做到这一点：

customClass: {
    confirmButton: 'my-confirm-button-class'
},

或者，您可以在 onBeforeOpen 上切换类：

onBeforeOpen: function(ele) {
    $(ele).find('button.swal2-confirm.swal2-styled')
          .toggleClass('swal2-confirm swal2-styled swal2-confirm btn btn-success')
}

customClass: {
    confirmButton: 'my-confirm-button-class'
},

onBeforeOpen: function(ele) {
    $(ele).find('button.swal2-confirm.swal2-styled')
          .toggleClass('swal2-confirm swal2-styled swal2-confirm btn btn-success')
}

有什么方法可以改变永久课程

我建议添加您本地的 css 样式：

.swal2-styled.swal2-confirm {
.....
}

$('#btn').on('click', function (e) {
  Swal.fire({
      title: 'Are you sure?',
      text: 'You will not be able to recover this imaginary file!',
      type: 'warning',
      showCancelButton: true,
      confirmButtonText: 'Yes, delete it!',
      cancelButtonText: 'No, keep it,',
      customClass: {
          //confirmButton: 'my-confirm-button-class'
      },
      onBeforeOpen: function(ele) {
          $(ele).find('button.swal2-confirm.swal2-styled').toggleClass('swal2-confirm swal2-styled swal2-confirm btn btn-success')
      }
  }).then(function (result) {
      if (result.value) {
          Swal.fire(
                  'Deleted!',
                  'Your imaginary file has been deleted.',
                  'success'
          )

      } else if (result.dismiss === Swal.DismissReason.cancel) {
          Swal.fire(
                  'Cancelled',
                  'Your imaginary file is safe :)',
                  'error'
          )
      }
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@8.13.4/dist/sweetalert2.css">


<button id="btn">Click Me</button>

.swal2-styled.swal2-confirm {
.....
}

Answer 2

您可以使用以下方法来做到这一点：

  buttonsStyling: false,
  customClass: {
         confirmButton: "btn btn-outline-danger"
       }