前端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

更改按钮文字

默认是英文的,但是我们可以改成中文

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的值是对象,

  • element:代表是输入框
  • attributes:一些属性设置
    • type:input类型
    • placeholder:提示内容
swal({
  content: {
    element: "input",
    attributes: {
      placeholder: "Type your password",
      type: "password",
    },
  },
});

其他

好了,以上是最基本也是最常用的一些操作,更多可以参考文档哟!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券