vue-lazyload和v-viewer冲突问题

4 篇文章 0 订阅
  1. 测试环境和生产环境都无问题(都是build后的代码)
  2. vue-lazyload是vue的懒加载插件,v-viewer是个图片的预览插件,版本分别是1.3.1和1.4.2,存在一个问题就是懒加载插件正常执行,但是预览插件在初次加载后图片点击失效,只有页面强制重排后才会再次生效;
  3. 目前根据源码定位后发现是懒加载插件v-lazy中的add,update中影响了预览插件中对于图片的默认初始,导致预览插件的点击预览失效;
    正常监听img的对象
    这是用v-viewer指令进行,可以看到有对应的img数据,完成初始的img数据点击预览监听

这是组件的形式监听img数据
这个是通过viewer组件的形式进行引入,但是在初始页面的时候,由于v-lazy的图片懒加载的图片影响,在对图片进行预览时间监听的时候img的dom还没加载,导致监听失败,从而无法点击

  1. 本地解决方式,因为v-lazy替代了之前的src属性,所以测试结果是两者兼具,可以保证懒加载和预览插件正常执行(同样也有最原始的方法,换插件哈哈。。。()。。。);
  2. 同样,可以通过指令v-viewer的形式进行引入,加载需要预览的图片父级上,通过指令的形式,直接进行dom处理;
  3. 如果哪位遇到同样问题,如有别的解决方法可留言回复。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 4
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值