快捷導(dǎo)航

聊聊vue集成sweetalert2提示組件的問題

更新時(shí)間：2021年11月03日 11:35:45 作者：gblfy

這篇文章主要介紹了vue 集成 sweetalert2 提示組件的問題，本文通過項(xiàng)目案例實(shí)例代碼相結(jié)合給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧

一、項(xiàng)目集成

官網(wǎng)鏈接：https://sweetalert2.github.io

在這里插入圖片描述

案例

在這里插入圖片描述

1. 引入方式 CDN引入方式：

在index.html中全局引入

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

在這里插入圖片描述

位置：

在這里插入圖片描述

npm安裝方式：

npm install sweetalert2

2. 確認(rèn)框封裝

Confirm = {
    show: function (message, callback) {
        Swal.fire({
            title: '確認(rèn) ?',
            text: message,
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: '是的, 已確認(rèn)!'
        }).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. 確認(rèn)框使用

/**
     * 點(diǎn)擊【刪除】
     */
    del(id) {
      let _this = this
      Confirm.show("刪除后不可恢復(fù), 確認(rèn)刪除 !", function () {
        Loading.show()
        _this.$api.delete('http://127.0.0.1:9000/business/admin/chapter/delete/' + id).then((res) => {
          Loading.hide()
          console.log("刪除大章列表結(jié)果:", res)
          let resp = res.data
          if (resp.success) {
            _this.list(1)
            Swal.fire(
                '刪除成功!',
                '刪除成功！',
                'success'
            )
          }
        })
      })

5. 消息提示框使用

 /**
     * 點(diǎn)擊【保存】
     */
    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("保存大章列表結(jié)果:", res)
        let resp = res.data
        if (resp.success) {
          $("#form-modal").modal("hide")
          _this.list(1)
          Toast.success("保存成功！")
        } else {
          Toast.warning(resp.message)
        }
      })
    }