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 用来监听当前实例上的自定义事件,其第一个参数是事件名称或包含事件名称的数组,
其第二个参数是回调函数,该函数会接收触发函数的所有参数
---------------------
相关文章
- 基于SpringBoot+Vue家乡特色推荐系统
- 创建一个 Vue 的实例
- npm vue ivew vue-cli3
- Vue插件:Vue-resource github搜索示例
- vue项目中一些常用的插件
- 精品微信小程序ssm培训机构管理系统+后台管理系统|前后分离VUE
- 微信小程序药店管理系统+后台管理系统|前后分离VUE
- vue数据不响应,可能是用法有问题
- Vue 使用 vue-echarts 图表插件
- 我们开发中常用的常用浏览器常用插件,比如FeHelper,React Developer Tools, Vue Devtools,沙拉查词,Infinity,OneTab,AdGuard等
- vue element-ui 实现点击查看审核记录
- vue中移动端自适应的postcss-plugin-px2rem插件
- 解决vue-element-admin启动时会打开两个页面
- vue单文件中引用路径的处理
- 实战:vue项目中导入swiper插件
- Vue-i18n框架学习总结
- Vue和React对比学习之组件传值(Vue2 12种、Vue3 9种、React 7种)
- 你或许不知道Vue的这些小技巧
- vue 原理简单实现
- Vue插件开发流程详解-从开发到发布至npm(二)
- vue插件开发流程详解-从开发到发布至npm(一)
- Vue插件的开发(一)
- Vue-router2.0基础实践
- 分享一个精简的vue.js 图片lazyload插件
- vue——swiper上下无缝轮播
- vue——可复用swiper以及scoped样式穿透(可以不受scoped的限制来修改样式)
- Vue从入门到精通——第三章 使用 Vue 脚手架(下)