项目3种弹框模式

一、需求

二、使用插件 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中使用时的报错