木灵鱼儿

木灵鱼儿

阅读:797

最后更新:2020/12/23/ 23:15:04

element 上传文件组件-文件列表动画bug

今天想封装一个上传组件,用于本地选择文本文件后,前端直接将文本的内容给读取出来,然后提交这个拿到的文本内容。

所以,组件的作用就只是将文件转为文本。

bug

封装中我发现了一个bug,由于上传组件是自动上传的,所以我使用自定义上传覆盖默认上传方法。

然后再自定义上传方法中拿到文件,并读取到文本。

但是饿了么组件会默认将你选择的文件显示到文件列表中,也就是上面图上那个样子。并且会有动画

但是,如果我想要让它显示已上传,就是文件列表显示打勾,就需要对组件绑定的file-list数组push一个对象,对象里面有文件的name值,也就是如下:

this.fileList.push({name:"文件名"})

但是这样就会产生一个bug,列表的动画会将后面跟着的元素挤下去。

bug图

解决方法

找了半天发现没办法在js逻辑中解决这个问题,因为我是不需要上传,所以没有等待时间,所以组件自动插入一次动画,我手动又触发一次,导致这个问题。

没办法只能从css动手,百度了半天没有答案(百度真的越来越垃圾了)

最后谷歌找到一个方法:

 /deep/ .el-list-enter-active,
  /deep/ .el-list-leave-active {
    transition: none;
  }
  /deep/ .el-list-enter,
  /deep/ .el-list-leave-active {
    opacity: 0;
  }

使用上面这段scss,阻止成功的动画,就能避免这个问题。

版权申明

本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。

关于作者

站点职位 博主
获得点赞 1
文章被阅读 797

相关文章

目录树