素材管理（四）-删除素材-messagebox消息提示弹框组件-确认消息模式

viceen

于 2020-02-16 23:01:49 发布

阅读量532

点赞数

CC 4.0 BY-SA版权

分类专栏：项目-vue-PC端文章标签： vue 数据库

本文链接：https://blog.csdn.net/weixin_44867717/article/details/104350757

项目-vue-PC端专栏收录该内容

53 篇文章

订阅专栏

本文详细介绍了在素材管理系统中如何通过绑定事件、使用消息提示弹框组件确认删除操作，以及发送HTTP请求实现素材的删除，并更新列表显示。具体步骤包括点击删除图标、获取图片ID、发送异步请求并处理响应。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

06-素材管理-删除素材

点击删除图标
- 获取当前图片的ID
- 发送删除请求
- 成功：提示+更新列表

div盒子中绑定事件：

<span @click="delImage(item.id)" class="el-icon-delete"></span>

messagebox消息提示弹框组件-确认消息模式：
组件网址：messagebox消息提示弹框组件-确认消息模式
https://element.eleme.cn/#/zh-CN/component/message-box

methods中删除方法：

 // 删除图片
    delImage (id) {
      this.$confirm('此操作将永久删除该图片, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await this.$http.delete(`user/images/${id}`)
        // 成功，  发异步请求，外层函数加async
        this.$message.success('删除图片成功')
        this.getImages()
      }).catch(() => {
          //点取消，什么也不做
      })
    },