vue使用sweetalert2弹窗插件

1). 安装 sweetalert2

npm install sweetalert2@7.15.1 --save

2). 封装 sweetalert2

在 src 新建 plugins 文件夹，然后新建 vue-sweetalert2.js 文件，复制贴入以下代码：

src/plugins/vue-sweetalert2.js

 1 import swal from 'sweetalert2'
 2
 3 export default {
 4   install: (Vue) => {
 5     // sweetalert2 的设置默认配置的方法
 6     swal.setDefaults({
 7       type: 'warning',
 8       showCancelButton: true,
 9       confirmButtonColor: 'rgb(140,212,245)',
10       cancelButtonColor: 'rgb(193,193,193)'
11     })
12
13     // 添加全局方法
14     Vue.swal = swal
15     // 添加实例方法
16     Vue.prototype.$swal = swal
17   }
18 }

我们这里将 sweetalert2 封装成一个插件，Vue.js 的插件有一个公开方法 install ，这个方法的第一个参数是 Vue 构造器。将 swal 添加成全局方法和实例的方法后，我们就能通过 Vue.swal 和 this.$swal 进行访问

3). 引入并使用插件

打开 src/main.js 文件，引入并使用 ./plugins/vue-sweetalert2（单行注释部分是涉及的修改）:

src/main.js

 1 import Vue from 'vue'
 2 import App from './App'
 3 import router from './router'
 4 import './directives'
 5 import './components'
 6 import store from './store'
 7 // 引入插件
 8 import VueSweetalert2 from './plugins/vue-sweetalert2'
 9
10 // 使用插件
11 Vue.use(VueSweetalert2)
12
13 Vue.config.productionTip = false
14
15 /* eslint-disable no-new */
16 new Vue({
17   el: '#app',
18   router,
19   store,
20   components: { App },
21   template: '<App/>'
22 })

4). 添加退出确认

打开 src/components/layouts/TheEntry.vue 文件，修改 logout 方法：

src/components/layouts/TheEntry.vue

 1 logout() {
 2   this.$swal({
 3     text: '你确定要退出吗?',
 4     confirmButtonText: '退出'
 5   }).then((res) => {
 6     if (res.value) {
 7       this.$store.dispatch('logout')
 8     }
 9   })
10 }

转载于:https://www.cnblogs.com/yangguoe/p/9316624.html

vue使用sweetalert2弹窗插件相关推荐

基于vue 2.x的移动端网页弹窗插件wc-messagebox（支持Alert，Confirm，Toast，Loading）
参考文档:GitHub - helicopters/wc-messagebox: 基于 Vue 2.0 开发的 Alert, Toast, Confirm 插件, UI仿照 iOS 原生 ①安装插件: ...
基于vue.js的dialog插件art-dialog-vue2.0发布
art-dialog-vue -- 经典.优雅的网页对话框控件优点支持普通与 12 方向气泡状对话框支持 ARIA 标准面向未来:基于 HTML5 Dialog 的 API 支持标准与模态对话 ...
vue 定义全局弹框_VUE路由拦截：Vue自定义全局弹窗组件
前言在任何一个平台中,如果需要增加用户黏度,除了用户需要的基本内容外,用户登录注册提交信息也是非常重要的一环,可以了解用户基本信息,用户喜欢等. 抛出前后端混合开发外,vue可以轻松的实现路由拦截. ...
Vue中使用can-autoplay插件实现浏览器不支持自动播放音频时提示点击
场景 Vue中使用speak-tts插件实现点击按钮后进行语音播报(TTS/文字转语音): Vue中使用speak-tts插件实现点击按钮后进行语音播报(TTS/文字转语音)_BADAO_LIUMAN ...
pc 图片预览放大端vue_安利一款简单好用的Vue图片预览插件
在项目中因为要经常用到图片预览效果,自己写的话麻烦死啦(懒) vue-photo-preview 一个基于 photoswipe 的 vue 图片预览插件,支持移动端和PC端,支持各种手势操作,放大缩 ...
layer之jquery 弹窗插件（最后版本v1.8.5）
转载自 jquery 弹窗插件 layer jquery.layer版本(v1.8.5)下载地址注意:v1.8.5后改版移除各种API,构造方法改版 <!DOCTYPE html PUBLIC ...
.net core image怎么保存_轻量级Vue图片上传插件——Vue-core-image-Upload
介绍 vue-core-image-upload 是一款轻量级的 Vue.js 上传插件,它可以支持的图片的上传,裁剪,压缩.它同样也支持在移动端的图片处理,它定义了诸多上传周期,你可以自由的进行流程 ...
Vue调试神器vue-devtools - 插件下载安装
文章目录 Google如何安装调试Vue的神器`vue-devtools` ? 安装介绍: demo实例 - 演示代码: 相关文章链接: 1. https://github.com/vuejs/vue ...
WordPress网站弹窗插件PopupPress插件
简介: PopupPress插件是一款基于lightbox的弹窗插件WordPress的弹窗插件,支持HTML文本弹窗.广告弹窗.图像相册弹窗.视频音频弹窗.PDF预览弹窗.Iframe内容.表单.幻 ...