SweetAlert2简介
Javascript有内置的警报机制，可以使用window.alert()方法调用。这只是显示基本的警报弹窗。这样做的缺点是外观和感觉不是很好。UI在移动和桌面设备上都是一样的。我们没有办法定制警报。警报通常是通过弹出的错误/警告信息来通知用户。我们没有选择自定义，以接受用户的输入，这种方法。
SweetAlert是一个弹出式库，用漂亮的响应和自定义机制取代警报机制。它是一个简单的库，没有依赖性。它只有一个样式表和Javascript文件。这将被用于记录被删除，一些操作成功，认证失败等情况。
优点
- 定制化
- 响应性
- 易于学习
- 可与NPM和jquery/javascript应用程序一起使用
- 没有依赖性。只需要包含普通的Javascript和CSS文件
缺点
- 学习新库--学习曲线很小
- 需要添加新的库
安装和设置
要在你的项目中使用它，首先要安装这个库。Sweetalert提供了CDN库，以及npm/bower/yarn包，管理器。
在Jquery中使用CDN
从这里下载库。提取内容或你可以使用CDN库
Sweetalert CDN 你可以直接在head标签的脚本标签中使用CDN。
使用npm管理器
npm install sweetalert2
bower install sweetalert2
一旦你安装了这个库，创建和使用这个库是非常简单的。
创建 sweetalert 对象
你可以使用 swal 对象来初始化它。我们将看到使用这个对象的不同用例。
swal("Simple Message");
swal("Simplemessage!", "Title inserted hehre")
swal("Sucess message", "Text here", "success");
swal({
title: "Are you sure want to delete it?",
text: "Delete record,",
type: "warning",
showCancelButton: true,
confirmButtonColor: '#DD6B55',
confirmButtonText: 'Yes, deleted!',
closeOnConfirm: false,
//closeOnCancel: false
},
function(){
swal("Deleted!", "Your record has been deleted!", "success");
});
我们将看到上述代码的下面的屏幕截图
警报类型
swal对象有一个描述警报信息类型的属性。
- Success- 成功信息
- 错误- 错误信息
- Warning- 警告信息
- info- 信息消息
- 输入- 这允许接受用户的输入。
swal({
title: "Are you sure?",
text: "Delete record,",
type: "warning",
},
SweetAlert例子
我们将看到以下经常使用的例子。
默认情况下，它显示一个固定宽度的弹出窗口。要改变弹出窗口的高度，你必须写一个自定义CSS，如下所示。你必须使用Swal对象的一个新的自定义类。
swal({
title: 'Test',
customClass: 'new-height'
});
.new-height { height: 100vh;}
如何在sweetalert中显示两个输入字段？
swal对象提供了一个HTML选项，我们可以在这里写输入框的HTML代码。你不能使用文本选项和HTML选项。如果同时使用，只有文本选项被考虑。
swal({
title: 'two inputs',
html:
'' +
'',
preConfirm: function () {
return new Promise(function (resolve) {
resolve([
$('#input1').val(),
$('#input2').val()
])
})
},
onOpen: function () {
$('#input1').focus()
}
}).then(function (result) {
swal(JSON.stringify(result))
}).catch(swal.noop)
});
SweetAlert还提供了Angular、React和Vuejs库：
Angular库 - ngx-sweetalert2是npm包
React库 - sweetalert2-react-content是npm包
Vuejs库 - vue-sweetalert2是npm包
