layer 点击图片缩略图弹出图片原图

骑猪看日落 2021-10-23 15:38 931阅读 0赞

项目中有一个需求，点击图片的缩略图可以弹出弹层，查看图片原图；点击关闭按钮或点击遮罩层部分关闭图片

*  **代码实现如下：**

1.  项目是单页面，有多处需要用到查看图片详情，于是在主页面放置一个图片弹层的容器

1.  封装一个函数，需要传入要查看的图片的路径

1.  通过点击图片事件调用

$('#img').on('click',function () { 
           var curImgUrl = this.src;
           windowImg(curImgUrl);
        });

*  **图片弹层效果图：**  
    ![在这里插入图片描述][2019081517171618.png]
 *  **注意事项：**

在写的过程中遇到了一些问题，总结一下避免再次踩坑：

1.  由于弹层的图片是动态添加生成的，所以必须在调用layer.open()之前，先完成对弹层内容的渲染，这样可以实现弹层打开在页面居中~
2.  由于弹层中图片显示的是原图，当图片过大时需要对它做一个最大宽高的限制，在网上找了很多方法都不是很好用，于是在img标签内加了一个 width='100%的设置，设置弹层最大宽度maxWidth:800，这样能够将图片按原比例缩小（但是该方法还有缺陷，只做了宽度的限制，如果图片高度过大的话，在页面中会显示不全造成遮挡）
3.  设置图片最大宽度的格式是maxWidth:800，一开始按area的写法：maxWidth: ‘290px’，发现怎么都无效，文档还是要看仔细
4.  只有当area: 'auto’时，maxWidth的设定才有效

[2019081517171618.png]: /images/20211023/2fc5764d5e454fbd925e1ac003d408c4.png