前端SweetAlter弹窗js的使用

无道 2019-08-22 0 条评论 前端相关 阅读500 手机阅读

介绍

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 21:26
这篇文章还没有评论呢~
点击刷新/生成验证码