ImgShow.vue代码如下：
<template><a-card style="width: 100%"><div><img:width="100":height="100":src="file"alt=""@click="handlePhotoShow(file)"/></div><div class="showImg" v-if="pictShow" @mousewheel="bbimg(this)"><div class="setting_box"><a-iconclass="setting_zoom"v-if="zoomInShow == false"type="zoom-in"@click="handleZoomIn"/><a-iconcolor="#fff"class="setting_zoom"v-if="zoomInShow == true"type="zoom-out"@click="handleZoomOut"/><a-icon color="#fff" class="setting_close" type="close" @click="handleClose" /></div><img :src="file" alt="" :class="classStyle" :style="test" @mousedown="imgMove" /></div></a-card></template><script>export default {name: 'ImgShow',props: {file: {type: String,default: ''}},data() {return {test: '',pictShow: false,zoomInShow: false,params: {zoomVal: 1,left: 0,top: 0,currentX: 0,currentY: 0,flag: false,}}},computed: {classStyle() {return this.zoomInShow ? 'a1' : 'a2'},},created () {console.log(this.file, 'this.file')},methods: {// 实现图片放大缩小 bbimg() {let e = e || window.eventthis.params.zoomVal += e.wheelDelta / 1200if (this.params.zoomVal >= 0.2) {this.test = `transform:scale(${this.params.zoomVal});`} else {this.params.zoomVal = 0.2this.test = `transform:scale(${this.params.zoomVal});`return false}},// 实现图片拖拽imgMove(e) {console.log('e', e)let oImg = e.targetlet disX = e.clientX - oImg.offsetLeftlet disY = e.clientY - oImg.offsetTopconsole.log('disX', disX)document.onmousemove = (e) => {e.preventDefault()let left = e.clientX - disXlet top = e.clientY - disYthis.test = this.test + `left: ${left}px;top: ${top}px;`}document.onmouseup = (e) => {document.onmousemove = nulldocument.onmouseup = null}},handleZoomIn() {this.zoomInShow = true},handleZoomOut() {this.zoomInShow = false},handlePhotoShow(file) {console.log('file', file)this.file = filethis.pictShow = true},handleClose() {this.pictShow = falsethis.test = `transform:scale(1)`},},}</script><style scoped lang="less">.showImg {width: 100%;height: 100vh;background-color: rgba(0, 0, 0, 1);position: fixed;*position: absolute;z-index: 20;margin: 0 auto;top: 0;left: 0;display: flex;justify-content: center;align-items: center;.setting_box {width: 100%;height: 50px;line-height: 50px;font-size: 20px;background-color: rgba(0, 0, 0, 0.3);position: absolute;top: 0;z-index: 999;.setting_zoom,.setting_close {position: absolute;z-index: 1000;top: 20px;color: #fff;opacity: 1;}.setting_zoom {right: 50px;}.setting_close {right: 10px;}}}.a1 {max-width: 200vw;max-height: 180vh;position: absolute;z-index: 22;margin-top: 40px;cursor: move;}.a2 {max-width: 95vw;max-height: 90vh;position: absolute;z-index: 22;margin-top: 40px;cursor: move;}.zoom-box {cursor: zoom-in;}.photo_box {margin: 0 5px 5px 0;}</style>
在需要用到图片预览功能的文件中引入：import ImgShow from './ImgShow.vue'
其中，imgs是图片对应的地址。
效果如图所示：
点击图片：
滚动鼠标可以放大缩小。
