vue-swal | 一款基于vuejs的仿SweetAlert弹窗组件

vue-swal是一款基于vuejs的仿SweetAlert弹窗组件。SweetAlert是一个漂亮的警告框组件，用于替代浏览器默认的弹窗。

使用方法

安装

如果您想使用vue-swal模态框组件，首先您需要安装它，命令如下：

npm i vue-swal
// 或者
yarn add vue-swal
// 或直接使用cdn地址
https://unpkg.com/vue-swal
		

使用

在main.js中引入vue-swal

import Vue from 'vue'
import VueSwal from 'vue-swal'

Vue.use(VueSwal)			
		

使用示例代码：

export default {
  methods: {
    alert() {
      this.$swal('Hello word!')
    },
    alert2() {
      this.$swal('标题', '正文', 'success')
    }
  }
}			
		

vue-swal的配置参数和sweetalert完全相同，可以参考sweetalert的示例进行配置。

在nuxt.js中使用

1、添加文件 plugins/vue-swal.js

import Vue from 'vue'
import VueSwal from 'vue-swal'

Vue.use(VueSwal)			
		

2、在nuxt.config.js中添加插件：

module.exports = {
  plugins: ['~/plugins/vue-swal']
}			
		

3、为了在打包时能缓存vue-swal，需要在nuxt.config.js将 vue-swal添加到vendor包中。

module.exports = {
  build: {
    vendor: ['vue-swal']
  },
  plugins: ['~/plugins/vue-swal']
}		
		

github网址：https://github.com/anteriovieira/vue-swal