SweetAlter是一个可以美化的alter,他可以是适应所有设备【电脑,手机,平板】,自动全屏覆盖,位置在屏幕最中间。
可以自定配置一些参数,到达最好使用效果。
并且,是全js操作,也即不用再html写任何标签。
官网
Sweetalter官网是:https://sweetalert.js.org/docs/
也有中文网【注意不是官网,我不确定他是不是官网】,但是我觉得文档有问题,所以这里只放了英文官网,可以自行搜索中文网。
sweetalter是支持npm和浏览器端两种方法的。
npm install sweetalert
<script src="https://cdn.bootcss.com/sweetalert/2.1.2/sweetalert.min.js"></script>
swal({
text: '你好,欢迎访问迷思雨 misiyu.cn'
})
swal({
text: '你好,欢迎访问迷思雨 misiyu.cn',
button: true,
})
图标有:
默认是英文的,但是我们可以改成中文
swal({
text: '确认删除吗?',
icon: 'warning',
buttons: ['取消', '确定']
});
sweetalert是支持Promise
具体可参考这篇文章:https://www.liaoxuefeng.com/wiki/1022910821149312/1023024413276544
swal({
title: "确定删除吗?",
text: "删除不可逆!",
icon: "warning",
buttons: ['取消', '确认'],
dangerMode: true,
})
.then((yes) => {
if (yes) {
axios.delete('/admin/SiteConfig/' + id)
.then(res => {
if (res.data.status === 1) {
swal({
text: res.data.msg,
icon: 'success',
buttons: false,
});
} else {
swal({
text: res.data.msg,
icon: 'error',
buttons: false,
});
}
setTimeout(function () {
swal.close();
window.location.reload();
}, 1300);
});
}
});
以上是我常用的一个模板,使用axios传输数据。 然后请求后台删除,这种场景挺常见的。
我们只需要传入content ,然后指定他的值是input即可。
swal({
content: 'input',
}).then(res => {
console.log(res);
});
首先,我们依然传入的是content,但是这次content的值是对象,
swal({
content: {
element: "input",
attributes: {
placeholder: "Type your password",
type: "password",
},
},
});
好了,以上是最基本也是最常用的一些操作,更多可以参考文档哟!