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

​ 一开始想的比较简单,直接在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',点击删除按钮就会弹一个提示框,确定才会走删除流程,否则框消失。

​ 成功!

el-upload源码跳坑2的更多相关文章

  1. maven常用插件: 打包源码 / 跳过测试 / 单独打包依赖项

    一.指定编译文件的编码 maven-compile-plugin <plugin> <groupId>org.apache.maven.plugins</groupId& ...

  2. vim中c/c++源码跳转

    在使用vim阅读c/c++代码的时候,代码跳转很重要, 在学习redis代码的时候遇到这个问题. 网上查找之后通过实践发现cscope比较好用,可以很方便的实现跳转 1. 安装cscope sudo ...

  3. 【Android初级】如何动态添加菜单项(附源码+避坑)

    我们平时在开发过程中,为了灵活多变,除了使用静态的菜单,还有动态添加菜单的需求.今天要分享的功能如下: 在界面的右上角有个更多选项,点开后,有两个子菜单:关于和退出 点击"关于", ...

  4. ubuntu14.04编译mono源码(有坑...)

     从github上下载了mono的源码,然后打算编译了.百度了一下教程,我去...居然没有教程.换bing搜索一下,我去...还是没有.关键字换一下:how to build mono on linu ...

  5. mac openresty 源码安装 坑

    下载openresty源码安装 下载页面http://openresty.org/cn/download.html 下载上一个版本的稳定版 https://openresty.org/download ...

  6. ubuntu编译python源码的坑

    在linux平台下编译python时只需要3条命令. 编译步骤 在github或https://www.python.org/downloads/中下载python源码 解压压缩包进路目录执行 1. ...

  7. 配置使用sourcemap调试vue源码爬坑

    环境: Google Chrome  V72.0.3626.109 vue-dev V 2.6.10 爬坑的乐趣就不说了(我恨啊),以下说一下出坑要点 1. 在vue-dev的package.json ...

  8. python2.7源码或第三方包里埋藏的坑(持续更新)

    1.psutil包,aix环境下,如果进程命令过长的话,程序无法取得完整的进程命令,测试代码如下 import psutil proc=psutil.Process(11534558) pidDict ...

  9. Android -- 带你从源码角度领悟Dagger2入门到放弃

    1,以前的博客也写了两篇关于Dagger2,但是感觉自己使用的时候还是云里雾里的,更不谈各位来看博客的同学了,所以今天打算和大家再一次的入坑试试,最后一次了,保证最后一次了. 2,接入项目 在项目的G ...

随机推荐

  1. 03_python_基本数据类型

    一.基本数据类型 整数 bool 字符串: 可以保存少量数据并进行相应的操作 列表 list: 存大量数据 [] 元组 tuple: 不可改变的() 字典 dict: 保存键值对,一样可以存储大量的数 ...

  2. C# byte array 跟 string 互转

    用 System.Text.Encoding.Default.GetString() 转换时,byte array 中大于 127 的数据转 string 时会出问题. 把这里的 Default 换成 ...

  3. Java代码审计连载之—SQL注入

    前言近日闲来无事,快两年都没怎么写代码了,打算写几行代码,做代码审计一年了,每天看代码都好几万行,突然发现自己都不会写代码了,真是很DT.想当初入门代码审计的时候真是非常难,网上几乎找不到什么java ...

  4. C#6.0语言规范(九) 命名空间

    C#程序使用命名空间进行组织.命名空间既可以用作程序的“内部”组织系统,也可以用作“外部”组织系统 - 一种呈现暴露给其他程序的程序元素的方式. 提供了使用指令(使用指令)以便于使用命名空间. 编译单 ...

  5. ICMP与ping:投石问路的侦察兵

    1. ICMP 协议 ICMP全称Internet Control Message Protocol,就是互联网控制报文协议.ping命令就是基于它工作的. ICMP 报文是封装在 IP 包 里面的. ...

  6. Sublime Text3 实现在浏览器中以HTML格式预览md文件

    1.首先找到Package Control 打开Sublime Text3,找到菜单栏:Preferences → Package Control,没有找到Package Control,那么点击Pa ...

  7. vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件

    vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件/库 一提到移动端的下拉刷新上拉翻页,你可能就会想到iScroll插件,没错iScroll是一个高性能,资源 ...

  8. POJ 2591

    #include<iostream> #include<stdio.h> #define MAXN 10000001 using namespace std; int a[MA ...

  9. JSONP是什么

    摘自:https://segmentfault.com/a/1190000007935557 一.JSONP的诞生 首先,因为ajax无法跨域,然后开发者就有所思考 其次,开发者发现, <scr ...

  10. Java异常处理设计(二)

    考虑对JDK的底层堆栈信息进行处理,一种是重写JDK的Throwable,另一种是在原错误堆栈信息上进行“二次加工”.目前这两种方式我都实现了,效果非常好. 这篇文章主要记录对错误堆栈进行“二次加工” ...