vue 添加弹框插件| plugins
2018年11月16日1.安装
|
1 2 |
npm install sweetalert2@7.15.1 --save yarn add sweetalert2@7.15.1 --save |
2.配置
创建 src/plugins/vue-sweetalert2.js 文件并开始编辑
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
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 //添加实例方法 } } |
创建 src/plugins/index.js文件并开始编辑
|
1 2 3 4 |
import Vue from 'vue' //引入vue import VueSweetalert2 from './vue-sweetalert2' //引入弹框插件 Vue.use(VueSweetalert2) //使用组件 |
打开main.js文件,引入插件
|
1 2 3 4 5 6 7 |
. . . import './plugins' //引入插件 . . . |
3.使用
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
. . . <li><a href="#" @click="logout"><i class="fa fa-sign-out text-md"></i>退出</a></li> . . . methods:{ logout(){ this.$swal({ //这里使用插件了 text: '你确定要退出吗?', confirmButtonText: '退出' }).then((res) => { if (res.value) { this.$store.dispatch('logout') //并添加 logout 方法 方法在 store里面 } }) } } . . . |
