vue element插件this.$confirm用法(取消也可以发请求)
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
场景:弹出框的两个按钮都能分别请求接口
最简单的弹出框就是“确定”“取消”,一般用户点击确定才会继续接下来的动作,点击取消则不做任何动作(即不会请求接口)。
如:
<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进行判断做什么操作了
GitHub 加速计划 / vu / vue
207.53 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:1 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 3 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 4 个月前
更多推荐
已为社区贡献4条内容
所有评论(0)