el-upload源码跳坑2 | 易学教程

产品又加了一个需求，要求删除图片时候弹一个提示框，如果确定就直接发请求从服务器删除图片

一开始想的比较简单，直接在on-remove的钩子函数上做弹框提示，如果取消就撤销，代码如下：

<el-upload :on-remove='remove'></el-upload>

remove:function(){
    this.$confirm('此操作将永久删除图片, 是否继续?', '提示', {
        // ...若干处理代码
    }
}

并不行，在我点下删除按钮的一瞬间，图片就消失了，接着才弹框。

跑去看源码，才发现里面的逻辑是这样的：

<!-- upload-list.vue -->
<span v-if="!disabled" class="el-upload-list__item-delete" @click="$emit('remove', file)"></span>

<!-- index.vue -->
<UploadList ... on-remove={this.handleRemove}</UploadList>

handleRemove(file, raw) {
  if (raw) {
    file = this.getFile(raw);
  }
  this.abort(file);
  let fileList = this.uploadFiles;
  // 先从fileList删除图片
  fileList.splice(fileList.indexOf(file), 1);
  // 再触发remove事件
  this.onRemove(file, fileList);
}

这样子就明白了，想在图片删除(消失)前出框只能撸源码了。

由于element-ui有自带的弹框组件，所以如果能在源码直接嵌入组件那就最好了，于是我在handleRemove中打印了一下this，显示为VueComponent，与我写的vue文件的this一样，所以方法可以直接用，那就太方便了。

修改后，源码如下：

// index.vue
// 首先添加一个变量来控制这个功能
jimmyRemoveTip: {
  type: Boolean,
  default: false
}

// 根据变量控制流程
handleRemove(file, raw) {
  // 添加的确认环节
  if (this.jimmyRemoveTip) {
    this.$confirm('此操作将永久删除图片, 是否继续?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      // ...删除图片
    }).catch(() => {
      this.$message({
        type: 'info',
        message: '已取消删除'
      });          
    });
  }else {
    // 正常流程
  }  
}

(语法检查真是严格，else前后，大括号前必须有空格)

这样，只要在组件传一个:jimmyRemoveTip='true'，点击删除按钮就会弹一个提示框，确定才会走删除流程，否则框消失。

成功！

来源：https://www.cnblogs.com/QH-Jimmy/p/7773578.html

标签

源码

filelist