1、表格字段显示图片的张数,点击张数可以预览所有的图片
需求:在表格里显示数字表示图片的张数,然后点击张数可以像viewer.js放大展示第一张图片,其它图片以viewer.js显示所有图片一样显示在底部,点击底部那张图片就放大那张图片。
参考前人对viewer.js使用,感觉viewer.js的图片放大预览逻辑石将viewer挂在在需要图片预览的元素id上,元素id内的图片元素被迪阿尼,则图片放大展示。这样的话,对于这个需求可以在每一个显示图片张数的单元个里添加一个唯一的元素id,并把返回的图片放在元素id里,并把元素id的内容整个隐藏。点击张数要展示放大第一张图片,可以在图片发生点击时,将viewer.js挂在到对应的元素id,并获取对应元素id的第一个图片元素,并模拟其被点击从而实现要求。代码如下:
上面的例子在某些浏览器不能达到效果,在这里注意模拟触发的click的兼容。
2、表格字段显示的图片是图片A,点击A图片放大的是图片B
需求:为提高性能,表格显示的图片是压缩的,点击放大预览的图片要是未经过压缩的。
这个需求可以参考1实现,将viewer.js挂在表格的id,可以实现点击放大预览对应的图片。首先在单元格里添加一个唯一的元素id,并把图片B放在元素id里,并把整个元素id隐藏。然后阻止图片A点击响应viewer.js的事件,点击图片A后模拟图片B被点击。代码如下:
后续1:
在后面的某一天,发现1有问题,预览的效果只有第一次点击会有,后面的点击则毫无反应,本着2是参照1思路实现的,理论上2也是有问题的,去2那里测试多次,发现2并没有问题,神奇哦。
那么,反过来看1与2代码的区别,参照2去修改1,应该能发现问题并解决。1与2的不同在于1的点击元素是span,2的是img,1的div元素存放的img是数组,2的div元素只有1个img元素。按照这样逻辑修改完所有要修改的,发现不可以。根据2的启发,又觉得是点击事件的问题,试了很多次,不可以。后面想想,也许石渲染的问题,代码修改如下:
经过测试还是不行。
既然images[0]元素的点击时间发生了,为什么预览放大图片的效果没有出来呢,是viewer没有挂载上?
仔细分析上面的方法,发现this.viewer只会挂载一个div,当其它div发生点击的时候,this.viewer并没有挂载到其它的div上,只会执行this.viewer.update这里。嗯。。。这样就对上了。这就要换一个思路了,我是每次显示图片张数的元素被点击一次就生成一个viewer好,还是直接生成10存放viewer好(表格显示10个数据)。想到表格的数据展示可以是20或者100,就点击一次生成一个新的好了,有些数据是没有图片的,点击预览的动作应该也不会发生那么多。上面的函数改成如下:
后面想到另一种方式
1的问题解决了,那么2的情况没有每次点击挂载到对应的元素上,那么它的功能为什么实现了呢?看了代码发现2用的viewer根本不是bindViewerjsShowOther方法所产生的viewer,而是另一个(这个表格还有其它的图片需要预览放大,有一个viewer是挂在el-table上的),所以bindViewerjsShowOther方式没有用上。