在vue中使用viewerjs

遇到了图片放大的功能,原生写的实在太捉急,所以找了个插件,但是官方文档中的option属性中的container却没有明确表明,原以为是决定整个背景区域,结果去了github上找了半天才发现,如果模式是model那么默认就会以整个body作为容器,就如上所述,如果设置了container,图片显示的背景区域依然是整个body,这一点可以通过查看style看得见,作者本人的答复入这个:https://github.com/fengyuanchen/viewerjs/issues/145,但是如果设置了inline那么就会限制在可设置的区域内,使用了inline模式的情况下需要监听事件才能关闭,就得用到exit()方法,还有个情况就是如果指定的div超出待预览图片的根元素,那么再显示大图的同时会出现一个relative的图片,当然图片显示的url也是绑定的。

这个插件还有个配合vue使用的衍生版本v-viewerjs,但是官方的api文档对于之前没接触过viewerjs的是相对难用的,对于个人而言更倾向于new新对象这种,因为目前对html的dom原理理解的并不是那么深入,所以还是针对viewerjs进行研究,上手的话多看几遍api文档就好。

在viewerjs中,如果需要预览一组图片的时候就得使用update()方法,同一个组件不能同时使用俩个实例化对象,注册另外一个之前必须注销之前的实例,

暂时就用到了这些,暂且先记录下来,有时间再继续研究。