温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

如何解决vue集成sweetalert2提示组件的问题

发布时间:2022-03-04 14:13:01 来源:亿速云 阅读:427 作者:小新 栏目:开发技术

这篇文章主要介绍如何解决vue集成sweetalert2提示组件的问题,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

如何解决vue集成sweetalert2提示组件的问题
如何解决vue集成sweetalert2提示组件的问题

一、项目集成

官网链接:https://sweetalert2.github.io

如何解决vue集成sweetalert2提示组件的问题

案例

如何解决vue集成sweetalert2提示组件的问题
如何解决vue集成sweetalert2提示组件的问题

1. 引入方式 CDN引入方式:

在index.html中全局引入

<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>

如何解决vue集成sweetalert2提示组件的问题

位置:

如何解决vue集成sweetalert2提示组件的问题

npm安装方式:

npm install sweetalert2

2. 确认框封装

Confirm = {
    show: function (message, callback) {
        Swal.fire({
            title: '确认 ?',
            text: message,
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: '是的, 已确认!'
        }).then((result) => {
            if (result.isConfirmed) {
                if (callback) {
                    callback()
                }
            }
        })
    }
}

3. 提示框封装

Toast = {
    success: function (message) {
        Swal.fire({
            position: 'top-end',
            icon: 'success',
            title: message,
            showConfirmButton: false,
            timer: 3000
        })
    },

    error: function (message) {
        Swal.fire({
            position: 'top-end',
            icon: 'error',
            title: message,
            showConfirmButton: false,
            timer: 3000
        })
    },

    warning: function (message) {
        Swal.fire({
            position: 'top-end',
            icon: 'warning',
            title: message,
            showConfirmButton: false,
            timer: 3000
        })
    }
};

4. 确认框使用

/**
     * 点击【删除】
     */
    del(id) {
      let _this = this
      Confirm.show("删除后不可恢复, 确认删除 !", function () {
        Loading.show()
        _this.$api.delete('http://127.0.0.1:9000/business/admin/chapter/delete/' + id).then((res) => {
          Loading.hide()
          console.log("删除大章列表结果:", res)
          let resp = res.data
          if (resp.success) {
            _this.list(1)
            Swal.fire(
                '删除成功!',
                '删除成功!',
                'success'
            )
          }
        })
      })

5. 消息提示框使用

 /**
     * 点击【保存】
     */
    save() {
      let _this = this
      Loading.show()
      _this.$api.post('http://127.0.0.1:9000/business/admin/chapter/save', _this.chapter).then((res) => {
        Loading.hide()
        console.log("保存大章列表结果:", res)
        let resp = res.data
        if (resp.success) {
          $("#form-modal").modal("hide")
          _this.list(1)
          Toast.success("保存成功!")
        } else {
          Toast.warning(resp.message)
        }
      })
    }

6.项目效果

如何解决vue集成sweetalert2提示组件的问题
如何解决vue集成sweetalert2提示组件的问题

以上是“如何解决vue集成sweetalert2提示组件的问题”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注亿速云行业资讯频道!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

vue
AI