在页面引入
<script src="dist/sweetalert.min.js"></script> <link rel="stylesheet" type="text/css" href="dist/sweetalert.css">
页面使用：
<script>
if (Config.user_id === 0) {
swal({
title: "",
text: '需要登录以后才能执行此操作。',
type: "warning",
showCancelButton: true,
cancelButtonText: "取消",
confirmButtonText: "前往登录"
}).then(function() {
location.href = '/login';
}).catch(swal.noop);
}
</script>以上为 1.X 版本的写法，2.X版本进行了很大改变，不再需要额外的css文件，只需引入以下文件
< script src = “ https://unpkg.com/sweetalert/dist/sweetalert.min.js ” > < / script >
从1.X升级
SweetAlert 2.0引入了一些重要的重大变化，以使库更易于使用和更灵活。
最重要的变化是不推荐使用回调函数来支持promises，并且您不再需要导入任何外部CSS文件（因为样式现在捆绑在.js文件中）。
以下是一些其他已弃用的选项及其替代品：
当使用单个字符串参数（例如
swal("Hello world!")）时，该参数将是模态text而不是它title。type并且imageUrl已被替换为单一icon选项。如果您使用的是速记版本（swal("Hi", "Hello world", "warning")），则无需进行任何更改。customClass现在className。imageSize不再使用。相反，您应该在必要时在CSS中指定尺寸限制。如果您有特殊用例，则可以为模态提供自定义类。showCancelButton并且showConfirmButton不再需要。相反，您可以设置buttons: true为显示两个按钮，或buttons: false隐藏所有按钮。默认情况下，仅显示确认按钮。confirmButtonText并且cancelButtonText不再需要。相反，您可以设置button: "foo"将确认按钮上的文本设置为“foo”，或buttons: ["foo", "bar"]将取消按钮上的文本设置为“foo”，将确认按钮上的文本设置为“bar”。confirmButtonColor不再使用。相反，您应该通过CSS指定所有样式更改。作为有用的简写，您可以设置dangerMode: true为将确认按钮设置为红色。否则，您可以在按钮对象中指定一个类。closeOnConfirm并且closeOnCancel不再使用。相反，您可以closeModal在按钮选项中设置参数。showLoaderOnConfirm不再需要了。当closeModal参数设置为时，您的按钮将自动显示loding动画false。animation已被弃用。所有样式更改都可以通过CSS和自定义模态类来应用。type: "input"，inputType，inputValue并inputPlaceholder已全部替换为content选项。您可以指定content: "input"获取默认选项，也可以使用内容对象进一步自定义选项。html不再使用。而是使用内容对象。allowEscapeKey现在是closeOnEsc为了清楚。allowClickOutside现在是closeOnClickOutside为了清楚。
上面示例代码对应的2.X版本写法：
swal({
title: "",
text: '需要登录以后才能执行此操作。',
icon: "warning",
buttons: true,
buttons: ["取消", "前往登录"],
}).then(function() {
location.href = '/login';
})页面展示效果：
更多使用方法查看官方地址：https://sweetalert.js.org/guides/
Comments (0)