聊聊vue集成sweetalert2提示组件的问题

 更新时间:2021年11月03日 11:35:45   作者:gblfy  
这篇文章主要介绍了vue 集成 sweetalert2 提示组件的问题,本文通过项目案例实例代码相结合给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧

在这里插入图片描述
在这里插入图片描述

一、项目集成

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

在这里插入图片描述

案例

在这里插入图片描述
在这里插入图片描述

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

在index.html中全局引入

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

在这里插入图片描述

位置:

在这里插入图片描述

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.js实现的全选与全不选功能示例【基于elementui】

    vue.js实现的全选与全不选功能示例【基于elementui】

    这篇文章主要介绍了vue.js实现的全选与全不选功能,结合实例形式分析了vue.js基于elementui实现全选与全不选功能的相关页面渲染、初始化数据及功能函数等相关操作技巧,需要的朋友可以参考下
    2018-12-12
  • Vue修改页面标签的方法示例

    Vue修改页面标签的方法示例

    vue项目有时候需要根据页面需要动态的去修改页面标题名称,本文就来介绍一下,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-06-06
  • 基于vue实现圆形菜单栏组件

    基于vue实现圆形菜单栏组件

    这篇文章主要介绍了基于vue实现的圆形菜单栏组件,本文通过实例代码,图文详解的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-07-07
  • vue项目中echarts自适应问题的高级解决过程

    vue项目中echarts自适应问题的高级解决过程

    虽然老早就看过很多echarts的例子,但自己接触的项目中一直都没有真正用到过,直到最近才开始真正使用,下面这篇文章主要给大家介绍了关于vue项目中echarts自适应问题的高级解决过程,需要的朋友可以参考下
    2023-05-05
  • 详解vue route介绍、基本使用、嵌套路由

    详解vue route介绍、基本使用、嵌套路由

    vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用,这篇文章主要介绍了vue route介绍、基本使用、嵌套路由,需要的朋友可以参考下
    2022-08-08
  • 详解Vue监听数据变化原理

    详解Vue监听数据变化原理

    本篇文章主要介绍了Vue监听数据变化,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-03-03
  • 去掉vue 中的代码规范检测两种方法(Eslint验证)

    去掉vue 中的代码规范检测两种方法(Eslint验证)

    我们在使用vue 脚手架时,为了规范团队的代码格式,会有一个代码规范检测,如果不符合规范就会报错,有时候我们不想按照他的规范去写。这时我们需要关闭,这里脚本之家小编给大家带来了去掉vue 中的代码规范检测两种方法(Eslint验证),一起看看吧
    2018-03-03
  • elementUI vue this.$confirm 和el-dialog 弹出框 移动 示例demo

    elementUI vue this.$confirm 和el-dialog 弹出框 移动 示例demo

    这篇文章主要介绍了elementUI vue this.$confirm 和el-dialog 弹出框 移动 示例demo,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-07-07
  • 怎样查看vue-cli的安装位置

    怎样查看vue-cli的安装位置

    这篇文章主要介绍了怎样查看vue-cli的安装位置问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • vue.js实现价格格式化的方法

    vue.js实现价格格式化的方法

    这里分享一个常用的价格格式化的一个方法,在电商的价格处理中非常的实用,具体实现代码大家参考下本文
    2017-05-05

最新评论