脚本宝典收集整理的这篇文章主要介绍了项目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中使用时的报错

脚本宝典总结

以上是脚本宝典为你收集整理的项目3种弹框模式全部内容，希望文章能够帮你解决项目3种弹框模式所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。