大家好，我是wilkwo，今天给大家分享一个小功能，就是点击一个小图，出现一个弹窗，弹窗显示这个小图的放大效果。这个效果一般出现在博客内容页面，作者可能添加图片的时候是添加的缩略图，也有可能是缩小版，比如只显示30%，那么作为一名读者，一打开这个页面的时候会发现这个图特别小，但是但你再点击这个小图的话，它会弹出来一个显示正常大小图片的弹窗，类似这种效果：
其实原理就是监听这个页面的图片，然后当监点击的是图片的时候就出现弹窗，再将小图的地址放到弹窗的图片标签内。
具体实现代码可参考（vue）：
<el-dialog title="提示" :visible.sync="dialogVisible" width="60%">\n <img :src="imgUrl" alt="" id="bigImg" />\n</el-dialog>\n\nwindow.addEventListener("click", (e) => {\n let target = e.target;\n if (target.tagName === "IMG") {\n this.imgUrl = target.src;\n this.dialogVisible = true;\n }\n });