vue中this.$confirm的使用及说明
更新时间:2024年08月22日 09:52:05 作者:皮皮皮皮克斯
这篇文章主要介绍了vue中this.$confirm的使用及说明方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue中this.$confirm
笔记整理:
之前项目中比较常见的confirm确认框写法,(与this.$router相似)
VUE+elementUI写法
onStopClick(row: any) { **this.$confirm**('确定停用该条消息吗 ?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }) .then(() => { this.requestSwitchStatus(row) }) .catch(() => {}) }
换成ant Design Vue时写法
handleDelete(record) { this.$confirm({ title:'确认删除吗?', okText: '是', cancelText: '否', icon: 'exclamation-circle', confirm: this.handleClear() }) }
VUE+VUX 写法:(参考VUX文档~)
this.$vux.confirm.show({ title: 标题, content: content, onCancel() { let url = window.location.href if (url.indexOf('isApp') > -1) { _this.goNV({type: ''}) } else { _this.$router.push('/home') } }, onConfirm() { _this.crushEggRequest(param) } })```
vue项目中this.$confirm中,确定和取消执行不同的逻辑
效果图片
【确定】按钮执行逻辑A,【取消】按钮执行逻辑B。
[x]按钮关闭confirm,和取消按钮执行不同的逻辑
代码如下:
this.$confirm("是否确定删除选中的数据?", "提示", { confirmButtonText: "确定", cancelButtonText: "取消", type: "warning", distinguishCancelAndClose: true, // 重要,设置为true才会把右上角X和取消区分开来 closeOnClickModal: false }).then(function () { // TODO 确认通过执行逻辑 }).catch(function (e) { if (e == 'cancel') { // TODO 确认不通过执行逻辑 } else if(e == 'close') { // TODO 右上角X的执行逻辑 } })
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
基于Vue3+Element Plus 实现多表单校验demo
表单校验在日常的开发需求中是一种很常见的需求,通常在提交表单发起请求前校验用户输入是否符合规则,通常只需formRef.value.validate()即可校验,本文给大家介绍基于Vue3+Element Plus 实现多表单校验demo,感兴趣的朋友一起看看吧2024-06-06一款移动优先的Solid.js路由solid router stack使用详解
这篇文章主要为大家介绍了一款移动优先的Solid.js路由solid router stack使用详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2022-08-08vue perfect-scrollbar(特定框架里使用非该框架定制库/插件)
这篇文章主要为大家介绍了vue perfect-scrollbar在特定框架里使用一款并非为该框架定制的库/插件如何实现,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪<BR>2023-05-05
最新评论