前言

项目里之前一直有用v-viewer组件来做图片的预览，但是最近需求变动需要加载大量图片，那肯定要做图片懒加载，然后就使用了vue-lazyload组件。

    //版本
     "vue-lazyload": "^1.3.3",
     "v-viewer": "^1.5.1"

出现的问题

图片懒加载没有问题，但是点击图片预览不了了，也没有任何报错。(不报错就很头疼啊！）

           <viewer  @inited="inited" :images="list[value]" >
              <img
                v-lazy="item.src"
                v-for="(item, index) in list[value]"
                :key="item.id"
              />
            </viewer>

怎么解决

因为没有一点报错信息，所以只能去慢慢摸索。

我们可以先对比使用v-lazy前后有viewer实例什么区别。监听inited事件来获取viewer实例。

使用v-lazy前

使用v-lazy后

可以看到使用后viewer实例上images是空的，length=0。我猜这个是因为在初始页面的时候，由于v-lazy的图片懒加载的影响，在对图片进行预览时监听的时候img的dom还没加载，导致监听失败，从而无法预览。

那可不可以自己手动给images和length添加值呢？

images里保存的是img的node节点，length自然就是img的长度。

直接上代码

    inited(viewer) {
        //viewer.element是img外层盒子的node节点，可以通过childNodes来获取img节点，并且把并且把获取到的nodeList变为数组，否则报错。
        //这里最好是去过滤一下是不是img节点，如果添加进去非img节点预览时也回报错。
        //如果你的页面层级比较深的话就得递归去遍历了
        viewer.images = [...viewer.element.childNodes].filter(item=>item.nodeName == 'IMG')
        
        //length也必须加上，  光加images是不行的。
        viewer.length = viewer.images.length
    },

这样写了以后，竟然可以预览了，经过测试也没有问题，那这个冲突的问题也就解决了。