• 我转过几个弯 绕过那个小雨楼
  • 拿着蒲扇摆着衣衫渡着紧箍咒
  • 不问天涯不停留 喝过几壶酒
  • 不过年少白头道义放胸口
  • 倘若明天之后 遥看前尘剑封侯
  • 似那天上神仙无所求
  • 朝朝暮暮君如梦醒十分不为何理由
  • 是真是假是惶恐是无休
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 又过了几个弯 算尽天量道莫慌
  • 踏这田园闻这芳草香
  • 跌跌撞撞仗剑天涯折煞不枉无笔良
  • 是梦是幻是温柔是家乡
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 谁能与我一醉方休

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,阻止成功的动画,就能避免这个问题。

0
  • 本文分类:vue 项目实战
  • 本文标签:上传vueelement饿了么动画
  • 流行热度:已超过 119 人围观了本文
  • 最后更新:2020年12月23日 - 23时15分04秒
  • 发布日期:2020年12月23日 - 23时15分04秒
  • 版权申明:本文系作者@木灵鱼儿原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。

相关文章

微信收款码
微信收款码