Vue+Elementui实现删除对话框(MessageBox弹框)
需求:点击删除按钮弹出对话框,点击确定发送请求,点击取消alert一个info弹框提示先按需引入MessageBox并在Vue.prototype中添加一个属性使其能够全局使用import {MessageBox} from 'element-ui'Vue.prototype.$message = Message使用时的代码:// 如果用户取消删除,则confirmResult为cancel//
·
需求:点击删除按钮弹出对话框,点击确定发送请求,点击取消alert一个info弹框提示
- 先按需引入 MessageBox并在Vue.prototype中添加一个属性使其能够全局使用
import {MessageBox} from 'element-ui'
Vue.prototype.$message = Message
- 使用时的代码:
// 如果用户取消删除,则confirmResult为cancel
// 如果用户确定删除,则confirmResult为confirm
const confirmResult = await this.$confirm(
'此操作将永久删除该分类, 是否继续?',
'提示',
{
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}
).catch(error => error)
if (confirmResult !== 'confirm') {
return this.$message.info('已取消删除')
} else {
const { data: res } = await this.$http.delete(`categories/${id}`)
if (res.meta.status !== 200) {
return this.$message.error('删除分类失败')
} else {
this.$message.success('删除分类成功')
this.getCateList()
}
}
注: 1.需要在所在函数名前加async,以简化后台返回的Promise数据
2.用在不同的场景时只需修改请求路径以及获取列表函数
3.需要改一下文本内容
4.this.$http为封装的ajax请求
更多推荐
已为社区贡献1条内容
所有评论(0)