前段时间,针对大文件上传使用 vue-simple-uploader 实现切片上传。有同事反应,在进行计算文件md5的时候,选中的文件会处于暂停上传的状态,让人有点击继续按钮的冲动,让我将操作按钮隐藏掉。
  本来想直接更改 vue-simple-uploader 组件的代码,结果细看了一下,果断放弃。毕竟上传文件列表 uploader-list 使用了 uploader-file。不能直接修改 uploader-file 实现这一需求。
所以,直接从最简单的样式上进行调整。

  1. 获取操作按钮的样式:
    在这里插入图片描述

  2. 在vue中将操作按钮的样式,通过样式穿透的方式实现隐藏

    <style>
      .uploader-list /deep/ .uploader-file-actions>span {
        display: none;
        float: left;
        width: 16px;
        height: 16px;
        margin-top: 16px;
        margin-right: 10px;
        cursor: pointer;
    }
    </style>
    
  3. 查看效果:
    在这里插入图片描述

Logo

前往低代码交流专区

更多推荐