sweetalert使用方法
时间: 2024-01-05 14:20:12 浏览: 117
sweetAlert弹窗组件的使用
以下是使用SweetAlert的方法:
1. 首先,确保在HTML文件中引入SweetAlert的CSS和JS文件:
```html
<script src="lib/sweet-alert.min.js"></script>
<link rel="stylesheet" type="text/css" href="lib/sweet-alert.css">
```
2. 使用SweetAlert弹出提示框,可以使用以下代码:
```javascript
swal("Hello, world!");
```
这将弹出一个简单的提示框,显示文本"Hello, world!"。
3. SweetAlert还支持自定义提示框的标题、类型、内容展示图片、确认取消按钮文本等。例如:
```javascript
swal({
title: "Custom Title",
text: "Custom Content",
icon: "success",
buttons: {
cancel: "Cancel",
confirm: "OK"
},
closeOnClickOutside: false
}).then((value) => {
if (value) {
// 用户点击了确认按钮
} else {
// 用户点击了取消按钮
}
});
```
这将弹出一个自定义的提示框,包含标题"Custom Title",内容"Custom Content",成功的图标,确认按钮文本为"OK",取消按钮文本为"Cancel"。当用户点击确认或取消按钮时,将执行相应的回调函数。
4. SweetAlert还支持其他功能,如设置提示框的宽度、高度、背景颜色等。具体的使用方法可以参考SweetAlert的官方文档。
阅读全文