Vue+Elementui实现删除对话框（MessageBox弹框）

最新推荐文章于 2024-10-23 16:08:22 发布

啊都给

最新推荐文章于 2024-10-23 16:08:22 发布

阅读量4.2k

点赞数

分类专栏： vue elementui

本文链接：https://blog.csdn.net/malone66/article/details/119700267

版权

vue 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

elementui

2 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何在Vue项目中利用Element-UI的MessageBox组件实现删除功能，当用户点击删除按钮时，会弹出警告对话框，用户可以选择确认或取消。如果用户点击取消，会显示一个info提示；点击确认则发送DELETE请求到指定API，并根据响应处理成功或失败的情况，显示相应的消息提示。同时，博客还提到了如何在不同场景下复用这段代码，并强调了错误处理和代码简洁性的重要性。

摘要由CSDN通过智能技术生成

需求：点击删除按钮弹出对话框，点击确定发送请求，点击取消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()
        }
      }