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'] }