vue element插件this.$confirm用法（取消也可以发请求）

场景：弹出框的两个按钮都能分别请求接口

最简单的弹出框就是“确定”“取消”，一般用户点击确定才会继续接下来的动作，点击取消则不做任何动作（即不会请求接口）。
如：

<template><el-button type="text" @click="open">点击打开 Message Box</el-button>
</template><script>export default {methods: {open() {this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {this.$message({type: 'success',message: '删除成功!'});}).catch(() => {this.$message({type: 'info',message: '已取消删除'});          });}}}
</script>

两个按钮都请求，则：

//任务下线offline(data){this.$confirm('是否开启保存点？', {distinguishCancelAndClose: true,confirmButtonText: '是',cancelButtonText: '否', //相当于 取消按钮type: 'warning'}).then(() => {api.taskOffline({taskId: data.taskId, isSavepoint: '1'}).then(res => {if (res.data.code === "100") {this.$message({type: 'success', message: '下线成功!'})this.getTableData()} else {this.$message({type: 'error', message: res.data.msg})this.getTableData()}})}).catch(action => {//判断是 cancel (自定义的取消) 还是 close （关闭弹窗）if (action === 'cancel'){api.taskOffline({taskId: data.taskId, isSavepoint: '0'}).then(res => {if (res.data.code === "100") {this.$message({type: 'success', message: '下线成功!'})this.getTableData()} else {this.$message({type: 'error', message: res.data.msg})this.getTableData()}})}})

默认情况下，当用户触发取消（点击取消按钮）和触发关闭（点击关闭按钮或遮罩层、按下 ESC 键）时，Promise 的 reject 回调和callback回调的参数均为 ‘cancel’（普通弹出框中的点击取消时的回调参数）。如果将distinguishCancelAndClose属性设置为 true，则上述两种行为的参数分别为 ‘cancel’ 和 ‘close’。（注意：如果没有设置distinguishCancelAndClose为true，则都默认为取消）

这样就可以在catch中拿到回调参数action进行判断做什么操作了

vue element插件this.$confirm用法（取消也可以发请求）相关推荐

vue + element 自定义表单验证的时候需要通过请求后端接口验证
vue + element 自定义表单验证的时候需要通过请求后端接口验证做vue项目的时候遇到了一个需求,在验证某个表单项时不仅需要是必填项而且要去通过接口校验是否有重复值. // templat ...
vue elementUI 之 this.$confirm 用法
this.$confirm('您确定退出当前账号吗?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning ...
Vue+Element el-table属性row-class-name用法及踩坑
el-table属性row-class-name用法及踩坑需求前提:想要给表格的某一行加上不同的background,用来区分当前行的状态根据官方给出的文档官方文档在el-table中绑定自定义 ...
Vue + Element + Table 分页选择勾选和取消勾选的问题
Vue + Element + Table 分页选择勾选和取消勾选的问题问题描述: 需求是这样的===>表格前面每条数据都有复选框吧然后表格有很多页 , 我从第一页选取N条数据再去其他页 ...
使用vue+element开发一个谷歌插件
简单功能:点击浏览器右上角插件icon弹出小弹窗,点击设置弹出设置页,并替换背景颜色. 这里使用vue+element并不是说写插件引用各种库才好,而是为了演示而使用. 开始 1.本地创建文件夹tes ...
vue自定义插件封装一个类似 element 中 message 消息提示框的插件
vue自定义插件封装一个类似 element 中 message 消息提示框的插件一.资源文档 1.vue内置组件 transition 2.Vue.use() 3.Vue.extend() 4. ...
在vue ui 中下载的element插件如何卸载并安装element-plus
项目场景: 通过cmd打开vue ui并自定义创建项目中,引入了vue-cli-plugin-element插件,此时项目是vue cli3 的,与此版本有冲突,应该要下载vue-cli-plugin ...
html列表拖拽排序插件,JS拖拽排序插件Sortable.js用法实例分析
本文实例讲述了JS拖拽排序插件Sortable.js用法.分享给大家供大家参考,具体如下: 最近由于项目功能设计的原因,需要对table中的行实现拖拽排序功能,找来找去发现Sortable.js能很好 ...
【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Table表格增删查改、Pagination分页、搜索框
文章目录目标代码 0.结构 1.按钮-删除 2.按钮-编辑 3.debug 4.样式 5.分页Pagination:功能 6.分页Pagination:样式 7.搜索框:功能 8.搜索框:样式总 ...
vue+element 实现试卷答题功能，单选题 ,多选题，判断题，简答题（2.0版本，2021.3.25更新）
vue+element 实现试卷答题功能,单选题 ,多选题,判断题,简答题(2.0版本,2021.3.25更新) 文章目录 vue+element 实现试卷答题功能,单选题 ,多选题,判断题,简答 ...

vue element插件this.$confirm用法（取消也可以发请求）

场景：弹出框的两个按钮都能分别请求接口

vue element插件this.$confirm用法（取消也可以发请求）相关推荐

最新文章

热门文章