一、需求
二、使用插件 Sweetalert
在vue里面使用 vue-sweetalert
npm install vue-sweetalert --save
import VueSweetAlert from 'vue-sweetalert'
Vue.use(VueSweetAlert)
完整例子:(不需要的选项就不要设置,详情看文档)
this.$swal({
title: '', // 标题
text: 'You will not be able to recover this imaginary file!', // 文本
type: 'warning', // 类型
timer: 2000, // 弹框显示时间
showCancelButton: true,
confirmButtonColor: '#DD6B55',
confirmButtonText: 'Yes, delete it!'
}).then(() => { // 点击确认按钮执行的操作
this.$swal('Deleted!', 'Your imaginary file has been deleted.', 'success')
}, () => { // 点击取消按钮执行的操作
this.$swal('Cancle!', 'Your imaginary file has been cancled.', 'success')
}).catch(this.$swal.noop) // 解决在vue中使用时的报错
三、注意事项
我在使用过程报错的几个地方
1.Uncaught (in promise) timer
解决:添加这样代码catch(this.$swal.noop)
this.$swal({...}).catch(this.$swal.noop)
2.选项报错 Unknown parameter "closeOnConfirm"
原因: 版本修改 Migration from SweetAlert to SweetAlert2 跟前面的文档个别选项设置有冲突,本项目看这个
四、代码复制
第1、2种
this.$swal({
title: 'Title',
text: 'You will not be able to recover this imaginary file!',
}).catch(this.$swal.noop)
第3种
this.$swal({
title: '', // 标题
text: 'You will not be able to recover this imaginary file!', // 文本
type: 'warning', // 类型
timer: 2000, // 弹框显示时间
showCancelButton: true,
confirmButtonColor: '#DD6B55',
confirmButtonText: 'Yes, delete it!'
}).then(() => { // 点击确认按钮执行的操作
this.$swal('Deleted!', 'Your imaginary file has been deleted.', 'success')
}, () => { // 点击取消按钮执行的操作
this.$swal('Cancle!', 'Your imaginary file has been cancled.', 'success')
}).catch(this.$swal.noop) // 解决在vue中使用时的报错
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。