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

当前位置:主页 > Vue > Vue组件 > vue-swal | 一款基于vuejs的仿SweetAlert弹窗组件
vue-swal | 一款基于vuejs的仿SweetAlert弹窗组件
分享:

    插件介绍

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

    浏览器兼容性

    浏览器兼容性
    时间:05-15
    阅读:
简要教程

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.jsvue-swal添加到vendor包中。

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

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