前端SweetAlter弹窗js的使用
介绍
SweetAlter是一个可以美化的alter，他可以是适应所有设备【电脑，手机，平板】，自动全屏覆盖，位置在屏幕最中间。
可以自定配置一些参数，到达最好使用效果。
并且，是全js操作，也即不用再html写任何标签。
官网
Sweetalter官网是：https://sweetalert.js.org/docs/
也有中文网【注意不是官网，我不确定他是不是官网】，但是我觉得文档有问题，所以这里只放了英文官网，可以自行搜索中文网。
安装
sweetalter是支持npm和浏览器端两种方法的。
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,
})带图标
带图标
图标有：
- success
- error
- info
- warning
更改按钮文字
默认是英文的，但是我们可以改成中文
截图-1566479516
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即可。
交互输入
截图-1566479916
swal({
content: 'input',
}).then(res => {
console.log(res);
});更多选择的交互输入
首先，我们依然传入的是content，但是这次content的值是对象，
- element：代表是输入框
- attributes：一些属性设置
- type：input类型
- placeholder：提示内容
更多选择的交互输入
swal({
content: {
element: "input",
attributes: {
placeholder: "Type your password",
type: "password",
},
},
});其他
好了，以上是最基本也是最常用的一些操作，更多可以参考文档哟！
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2019-08-22，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录