前言

最近因为项原因，需要图片预览功能，本来想使用组件库的图片预览组件的，后来因为项目ui组件库版本过低，无法使用组件库的预览功能，只能手搓一个简单的预览功能。废话不多说，直接上码。

代码：

<template><div class="position"><div class="smallImg" @click="bigImg(imgs)"><img :src="imgs" /></div><div id="previewImg"><img src="" @click="closeImg" /></div></div>
</template><script>
import $ from 'jquery' 
export default {data () {return {imgs: require('./123.jpg')}},methods: {// 列表图片放大缩小closeImg () {$("#previewImg img").attr('src', "");$("#previewImg").hide();},bigImg (imgs) {let image = new Image(); //创建一个image对象let path = imgs;image.src = path;   //新创建的image添加src$("#previewImg img").attr('src', path);$("#previewImg").show();}}
}
</script><style scoped>
.position {width: calc(100vw);height: calc(100vh);position: relative;top: 0px;
}
.smallImg {height: 100px;width: 100px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);
}
.smallImg img {height: 100%;object-fit: contain;
}#previewImg {position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);display: none;z-index: 9999;
}#previewImg img {object-fit: contain;vertical-align: middle;max-width: 80vw !important;max-height: 80vh !important;
}
</style>

效果如下：