返回顶部
首页 > 资讯 > 前端开发 > JavaScript >聊聊vue集成sweetalert2提示组件的问题
  • 818
分享到

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

2024-04-02 19:04:59 818人浏览 八月长安
摘要

目录一、项目集成1. 引入方式 CDN引入方式:2. 确认框封装3. 提示框封装4. 确认框使用5. 消息提示框使用6.项目效果 一、项目集成 官网链接:https://sweet

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

一、项目集成

官网链接: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内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: 聊聊vue集成sweetalert2提示组件的问题

本文链接: https://lsjlt.com/news/156301.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • 聊聊vue集成sweetalert2提示组件的问题
    目录一、项目集成1. 引入方式 CDN引入方式:2. 确认框封装3. 提示框封装4. 确认框使用5. 消息提示框使用6.项目效果 一、项目集成 官网链接:https://sweet...
    99+
    2024-04-02
  • 如何解决vue集成sweetalert2提示组件的问题
    这篇文章主要介绍如何解决vue集成sweetalert2提示组件的问题,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!一、项目集成官网链接:https://sweetalert2.github.io案例1. 引入方式 ...
    99+
    2023-06-25
  • 一文聊聊Vue中的KeepAlive组件
    看下面的图更加直观,图片来源一篇讲keepAlive 缓存优化的文章4、如何添加到 vue devtools 组件树上sharedContext.activate = (vnode, container, anchor) => { ...
    99+
    2022-11-22
    前端 Vue.js 前端框架
  • 聊聊SpringBoot中组件无法被注入的问题
    目录SpringBoot中组件无法被注入1、描述问题2、解决问题3、总结问题解决在@Component注入为nullSpringBoot中组件无法被注入 1、描述问题 在Spring...
    99+
    2024-04-02
  • 聊聊jenkins部署vue/react项目的问题
    目录准备工作1、安装参数化部署插件2、安装好插件后,配置Nodejs环境创建项目构建centOS安装jenkins1、安装JDK2、安装jenkins3、配置jenkis的端口4、启...
    99+
    2024-04-02
  • 聊聊goxorm生成mysql的结构体问题
    网上很多资源都说是xorm reverse mysql "root:123456@tcp(127.0.0.1:3306)/userscharset=utf8" ....
    99+
    2024-04-02
  • 聊聊docker 单机部署redis集群的问题
    目录docker部署redis集群1、创建redis网卡2、创建redis配置使用cluster集群配置3、创建redis集群测试docker 部署redis集群 1、创建redis...
    99+
    2024-04-02
  • 详细聊聊vue中组件的props属性
    目录问题一:那props具体是怎么使用呢?原理又是什么呢?往下看问题二:那如果我们想给年龄加1岁,怎么实现?问题三:对于年龄这一类型,我们最希望拿到的是什么数据类型?问题四:可以限制...
    99+
    2024-04-02
  • 聊聊Unity自定义组件之序列帧播放组件问题
      我们知道在unity中播放序列帧动画有两种方式,第一种是利用Unity自带的animation组件来播放,我们只需要在工程目录中全选选中所有我们需要播放的图片,将其拖动到Hier...
    99+
    2024-04-02
  • 聊聊c++数组名称和sizeof的问题
    一维数组名称的用途: 可以统计整个数组在内存中的长度 可以获取数组在内存中的首地址 示例: int main() { //数组名用途 //1、可以获取整个数组占用内...
    99+
    2024-04-02
  • 聊聊对vue内置组件keep-alive的理解
    Keep-alive 是什么?下面本篇文章带大家聊聊对vue内置组件keep-alive的理解,希望对大家有所帮助!一、Keep-alive 是什么keep-alive是vue中的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染...
    99+
    2023-05-14
    keep-alive 前端 JavaScript Vue.js
  • 聊聊MongoDB 带访问控制的副本集部署问题
    目录一、下载MongoDBServer及MongoDBShell二、副本集初始化三、增加访问控制  当你需要用到一个MongoDB 副本集集群,用于开发测试时, 可以通过下面的步骤简...
    99+
    2024-04-02
  • 详细聊聊vue组件是如何实现组件通讯的
    目录前言如何解决组件之间通讯呢?解决方案:父传子实现过程:原理图示父组件 Footer.vue子组件 MyCon.vue小案例 采用了父传子父组件 App.vue子组件 MyProd...
    99+
    2024-04-02
  • 聊聊Vue提示框设置时间的几种方法
    Vue是一种流行的JavaScript框架,用于构建现代和交互式的Web应用程序。提示框是一个常用的UI组件,可以帮助用户在需要时快速了解信息。在Vue中,可以使用各种库和组件来创建提示框,其中包括一些具有时间参数的选项。本文将讨论Vue提...
    99+
    2023-05-14
  • 聊聊使用docker安装nginx提供web服务的问题
    目录一、拉取镜像二、运行镜像启动容器三、文件映射四、再次启动容器服务 一、拉取镜像 docker pull命令用于拉取应用镜像,docker pull nginx命令用于拉取最新版本...
    99+
    2024-04-02
  • 深入聊聊vue组件的两种不同的编写风格
    本篇文章带大家聊聊vue组件的两种不同的编写风格,详细介绍一下选项式API和组合式API,希望对大家有所帮助!随着vue3的逐渐稳定,以及周边生态的完善,现在vue3已经成为默认的使用方式了的所以,对于一个前端开发者,Vue2与Vue3都得...
    99+
    2023-05-14
    Vue javascript
  • 聊聊Python对CSV文件的读取与写入问题
    今天天气"刚刚好"(薛之谦么么哒),无聊的我翻到了一篇关于csv文件读取与写入的帖子,作为测试小白的我一直对python情有独钟,顿时心血来潮,决定小搞他一下,分享给那些需要的小白,...
    99+
    2024-04-02
  • 聊聊基于pytorch实现Resnet对本地数据集的训练问题
    目录1.dataset.py(先看代码的总体流程再看介绍)2.network.py3.train.py4.结果与总结本文是使用pycharm下的pytorch框架编写一个训练本地数据...
    99+
    2024-04-02
  • Vue怎么实现微信聊天窗口展示组件功能
    这篇文章主要介绍“Vue怎么实现微信聊天窗口展示组件功能”,在日常操作中,相信很多人在Vue怎么实现微信聊天窗口展示组件功能问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Vue怎么实现微信聊天窗口展示组件功能...
    99+
    2023-07-04
  • 一文聊聊Vue组件生命周期的三个阶段(创建、运行和销毁)
    总结生命周期:1)又称:生命周期回调函数、生命周期函数、生命周期钩子。2)含义:vue在关键时刻帮助我们调用一些特殊名称的函数。3)生命周期函数的名字不可更改,但函数的具体内容是程序员根据需求编写的。4)生命周期函数中的this指向是 vm...
    99+
    2023-05-14
    Vue 组件 生命周期
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作