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 进行访问。

注：添加实例方法时，方法名前面的 $ 不是必须的，但我们推荐加上它，以避免和组件定义的属性和方法产生冲突。
*/

入口文件引入并使用

// 引入插件
import VueSweetalert2 from './plugins/vue-sweetalert2'

// 使用插件
Vue.use(VueSweetalert2)

Vue文件中使用插件

logout() {
  this.$swal({
    text: '你确定要退出吗?',
    confirmButtonText: '退出'
  }).then((res) => {
    if (res.value) {
      this.$store.dispatch('logout')
    }
  })
}

延伸

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 用来监听当前实例上的自定义事件，其第一个参数是事件名称或包含事件名称的数组，
其第二个参数是回调函数，该函数会接收触发函数的所有参数