隐藏vue-simple-uploader组件文件上传列表的暂停、开始等操作按钮

最新推荐文章于 2024-02-19 14:41:33 发布

Qredsun

最新推荐文章于 2024-02-19 14:41:33 发布

阅读量8.7k

点赞数 2

分类专栏： Vue 文章标签： css vue.js html

本文链接：https://blog.csdn.net/qq_17328759/article/details/120669494

版权

Vue 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

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

获取操作按钮的样式：

在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>