问题描述: 在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插件,并自定义按钮的点击事件。