Vue实战之插件 sweetalert 的使用
安装
npm install sweetalert2@7.15.1 --save
封装 sweetalert
import swal from 'sweetalert2'
export default {
install: (Vue) => {
// sweetalert2 的设置默认配置的方法
swal.setDefaults({
type: 'warning',
showCancelButton: true,
confirmButtonColor: 'rgb(140,212,245)',
cancelButtonColor: 'rgb(193,193,193)'
})
// 添加全局方法
Vue.swal = swal
// 添加实例方法
Vue.prototype.$swal = swal
}
}
/*
Vue.js 的插件有一个公开方法 install ,这个方法的第一个参数是 Vue 构造器。
将 swal 添加成全局方法和实例的方法后,我们就能通过 Vue.swal 和 this.$swal 进行访问。
注:添加实例方法时,方法名前面的 $ 不是必须的,但我们推荐加上它,以避免和组件定义的属性和方法产生冲突。
*/
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
入口文件引入并使用
// 引入插件
import VueSweetalert2 from './plugins/vue-sweetalert2'
// 使用插件
Vue.use(VueSweetalert2)
1
2
3
4
5
Vue文件中使用插件
logout() {
this.$swal({
text: '你确定要退出吗?',
confirmButtonText: '退出'
}).then((res) => {
if (res.value) {
this.$store.dispatch('logout')
}
})
}
1
2
3
4
5
6
7
8
9
10
延伸
const Message = Vue.extend(MessageComponent)
const vm = new Message()
const $el = vm.$mount().$el
Vue.extend 用来创建一个新『子类』,其参数是一个包含组件选项的对象,对应我们这里的 Message 组件;
使用 new 关键字可以创建一个新的 Message 实例,因为没有指定 el 挂载目标,当前实例处于『未挂载』状态;
使用 vm.$mount() 手动地挂载一个未挂载的实例,并返回当前实例,此时我们能从实例获取 $el
vm.$on('update:show', (value) => {
vm.show = value
})
$on 用来监听当前实例上的自定义事件,其第一个参数是事件名称或包含事件名称的数组,
其第二个参数是回调函数,该函数会接收触发函数的所有参数
---------------------
Vue实战之插件 sweetalert 的使用的更多相关文章
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十一║Vue实战:开发环境搭建【详细版】
缘起 哈喽大家好,兜兜转转终于来到了Vue实战环节,前边的 6 篇关于Vue基础文章我刚刚简单看了看,感觉写的还是不行呀,不是很系统,所以大家可能看上去比较累,还是得抽时间去润润色,修改修改语句和样式 ...
- Vue 自定义一个插件的用法、小案例及在项目中的应用
1.开发插件 install有两个参数,第一个是Vue构造器,第二个参数是一个可选的选项对象 MyPlugin.install = function (Vue, options) { // 1 ...
- vue实战记录(五)- vue实现购物车功能之商品总金额计算和单选全选删除功能
vue实战,一步步实现vue购物车功能的过程记录,课程与素材来自慕课网,自己搭建了express本地服务器来请求数据 作者:狐狸家的鱼 本文链接:vue实战-实现购物车功能(五) GitHub:sue ...
- vue实战记录(六)- vue实现购物车功能之地址列表选配
vue实战,一步步实现vue购物车功能的过程记录,课程与素材来自慕课网,自己搭建了express本地服务器来请求数据 作者:狐狸家的鱼 本文链接:vue实战-实现购物车功能(六) GitHub:sue ...
- vue实战记录(四)- vue实现购物车功能之过滤器的使用
vue实战,一步步实现vue购物车功能的过程记录,课程与素材来自慕课网,自己搭建了express本地服务器来请求数据 作者:狐狸家的鱼 本文链接:vue实战-实现购物车功能(四) GitHub:sue ...
- vue实战记录(三)- vue实现购物车功能之渲染商品列表
vue实战,一步步实现vue购物车功能的过程记录,课程与素材来自慕课网,自己搭建了express本地服务器来请求数据 作者:狐狸家的鱼 本文链接:vue实战-实现购物车功能(三) GitHub:sue ...
- vue实战记录(二)- vue实现购物车功能之创建vue实例
vue实战,一步步实现vue购物车功能的过程记录,课程与素材来自慕课网,自己搭建了express本地服务器来请求数据 作者:狐狸家的鱼 本文链接:vue实战-实现购物车功能(二) GitHub:sue ...
- vue实战记录(一)- vue实现购物车功能之前提准备
vue实战,一步步实现vue购物车功能的过程记录,课程与素材来自慕课网,自己搭建了express本地服务器来请求数据 作者:狐狸家的鱼 本文链接:vue实战-实现购物车功能(一) GitHub:sue ...
- vue 右键菜单插件 简单、可扩展、样式自定义的右键菜单
今天分享的不是技术,今天给大家分享个插件,针对现有的vue右键菜单插件,大多数都是需要使用插件本身自定义的标签,很多地方不方便,可扩展性也很低,所以我决定写了一款自定义指令调用右键菜单(vuerigh ...
随机推荐
- 【LeetCode刷题Java版】Reverse Words in a String
Given an input string, reverse the string word by word. For example, Given s = "the sky is blue ...
- spring mvc +Mybatis3.1 整合的时候异常
在使用Mybatis3.10+spring3.10+mybatis-spring-1.0.0集成,使用spring 时发生例如以下错误: 严重: Servlet.service() for servl ...
- Java学习笔记----容器
一.Java Collections框架是什么? Java Collections 框架中包括了大量集合接口以及这些接口的实现类和操作它们的算法(如:排序.查找.反转.替换.复制.取最小元素.取最大元 ...
- 【bzoj2600】 [Ioi2011]ricehub
如果发现尾指针到头指针这段稻田的中位数上建一个粮仓时距离之和超过了B 就调整尾指针对距离维护一个前缀和 每次取中位数之后可以O(1)计算距离和 #include<algorithm> #i ...
- 【bzoj4034】[HAOI2015]T2
siz[v]表示以v为根的子树的节点数 top[v]表示v所在的重链的顶端节点 fa[v]表示v的父亲 pos[v]表示v的父边标号 mx[v]表示v的子树中边的标号最大的那条边 参考:http:// ...
- 记一次ORA-600[13011]
SunOS 5.10 Oracle 10.2.0.2.0 开发环境某一数据库出现ora-600报错. alert.log中的报错信息: Thu Nov 13 15:11:43 2014 Errors ...
- JFreeChart自我总结
想飞就别怕摔 大爷的并TM骂人 JFreeChart自我总结 1.饼图.柱状图.折线图生成的工具类 1 package com.text.util; 2 3 import java.awt. ...
- [POI2011]LIZ-Lollipop
https://www.zybuluo.com/ysner/note/1303462 题面 给一个只有\(1\)和\(2\)的序列,每次询问有没有一个子串的和为\(x\). \(n\leq10^6\) ...
- 14_传智播客iOS视频教程_OC的数据类型
对比一下OC和C差别,首先第一个是数据类型. C语言的数据类型分哪几类?C语言有哪些数据类型? 基本数据类型当然还包括int的一些修饰符.像short.long.long long.unsigned. ...
- 【转】@Controller和@RestController的区别
知识点:@RestController注解相当于@ResponseBody + @Controller合在一起的作用. 1) 如果只是使用@RestController注解Controller,则Co ...