当前位置: 首页 > Web前端 > CSS

项目3种弹出模式

时间:2023-03-30 21:51:47 CSS

1.需求2.使用插件Sweetalert使用vue-sweetalertnpminstallvue-sweetalert--saveimportVueSweetAlertfrom'vue-sweetalert'Vue.use(VueSweetAlert)完整示例:(不要设置不必要的选项,看文档详情)this.$swal({title:'',//titletext:'Youwillnotbeabletorecoverthisimaginaryfile!',//texttype:'warning',//typetimer:2000,//炸弹框显示时间showCancelButton:true,confirmButtonColor:'#DD6B55',confirmButtonText:'是,删除它!'}).then(()=>{//点击确认按钮执行操作this.$swal('Deleted!','你虚构的文件已被删除','成功')},()=>{//点击取消按钮执行的操作this.$swal('取消!','你的虚构文件hasbeencancelled.','success')}).catch(this.$swal.noop)//解决在vue中使用时报错3.注意事项我在使用过程中多处报错1.未捕获(inpromise)计时器解决方案:添加此代码catch(this.$swal.noop)this.$swal({...}).catch(this.$swal.noop)2.选项报错Unknownparameter"closeOnConfirm"原因:版本修改MigrationfromSweetAlerttoSweetAlert2There与之前文档中的个别选项设置有冲突。对于此项目,请参阅此。4.代码拷贝1号和2号.this.$swal({title:'Title',text:'你将无法恢复这个虚构的文件!',}).catch(this.$swal.noop)Type3this.$swal({title:'',//titletext:'你将无法恢复这个虚构的文件!',//texttype:'warning',//typetimer:2000,//弹出框显示时间showCancelButton:true,confirmButtonColor:'#DD6B55',confirmButtonText:'Yes,deleteit!'}).then(()=>{//点击确认按钮执行的操作this.$swal('Deleted!','你假想的文件已被删除','success')},()=>{//点击取消按钮执行的操作this.$swal('取消!','你想象中的文件已被取消.','成功')}).catch(this.$swal.noop)//解决在vue中使用时报错

猜你喜欢