问题描述: 在Angular2项目中使用Sweetalert插件,自定义按钮的点击事件无效。
解决方法:
确保Sweetalert插件已正确安装并引入到项目中。
在要使用Sweetalert的组件中引入Sweetalert的相关方法:
import swal from 'sweetalert';
swal({
  title: "Are you sure?",
  text: "Once deleted, you will not be able to recover this imaginary file!",
  icon: "warning",
  buttons: true,
  dangerMode: true,
  customClass: 'custom-swal',
})
.then((willDelete) => {
  if (willDelete) {
    // 点击确认按钮时的逻辑处理
    console.log("Confirmed");
  } else {
    // 点击取消按钮时的逻辑处理
    console.log("Cancelled");
  }
});
.custom-swal button.confirm {
  background-color: #3085d6;
}
.custom-swal button.cancel {
  background-color: #aaa;
}
这样可以自定义Sweetalert弹出框的按钮样式。
swal({
  title: "Are you sure?",
  text: "Once deleted, you will not be able to recover this imaginary file!",
  icon: "warning",
  buttons: {
    cancel: {
      text: "No",
      value: false,
      visible: true,
      className: "",
      closeModal: true,
    },
    confirm: {
      text: "Yes",
      value: true,
      visible: true,
      className: "",
      closeModal: true,
    }
  },
  dangerMode: true,
  customClass: 'custom-swal',
})
.then((willDelete) => {
  if (willDelete) {
    // 点击确认按钮时的逻辑处理
    console.log("Confirmed");
  } else {
    // 点击取消按钮时的逻辑处理
    console.log("Cancelled");
  }
});
通过以上步骤,就可以在Angular2项目中使用Sweetalert插件,并自定义按钮的点击事件。