前言：预览图片现在已经有成熟的组件了，比如element ui的图片预览功能，但是现实开发过程中，element ui图片预览已经不满足需求了，比如涉及预览时删除图片以及下载图片
自定义封装图片预览组件
功能：滚轮滚动图片放大、还原图片、左旋转、右旋转、上一张、下一张、删除图片、预览大图
参数传入：是否显示图片、图片的url、图片预览图的宽度、图片预览图的宽度、预览列表
1、布局
这里的布局根据需求有两种，一种是显示当前第一张图片，点击预览也可切换下一张
另外一种是不显示图片，点击查看才可显示，这里通过一个变量isShowImg控制
<div class="image-wrap">
<div @click="onPreview" :class="[isShowImg ? '' : 'isShowImg']">
<img
v-if="isShowImg"
class="thumb-image"
:src="src"
:style="{
width: width,
height: height
}"
/>
</div>
<div class="mask" v-if="isShow">
<div class="mask-image__wrap">
<img
id="customImage"
class="origin-image"
:src="originUrl"
:style="styleObj"
@wheel="onWheel"
/>
</div>
<div class="action">
<button class="btn-item" @click="onZoom('in')">放大</button>
<button class="btn-item" @click="onZoom('out')">缩小</button>
<button class="btn-item" @click="onReset">还原</button>
<button class="btn-item" @click="onRotate('left')">左转</button>
<button class="btn-item" @click="onRotate('right')">右转</button>
<button class="btn-item" @click="isShow = false">关闭</button>
<button class="btn-item" @click="onPrev" v-if="isOnPrev">上一张</button>
<button class="btn-item" @click="onNext" v-if="isOnNext">下一张</button>
<button class="btn-item" @click="onDelete" v-if="isButton">删除</button>
</div>
<div class="close-wrap">
<button class="btn-item" @click="isShow = false">关闭</button>
</div>
</div>
</div>
2、预览图片
isShow 控制大图显示隐藏
previewList 为当前图片列表
// 预览大图
onPreview() {
this.isShow = true;
this.curIndex = this.index;
if (this.previewList.length === 0) {
this.originUrl = this.src;
} else {
if (this.curIndex < this.previewList.length) {
this.originUrl = this.previewList[this.curIndex];
}
}
}
3、放大缩小图片
使用鼠标滚轮事件，或者点击放大缩小按钮也可实现
原理：改变图片样式，使用css3
onZoom(type) {
if (this.isDone) return;
this.isDone = true;
const timer = setTimeout(() => {
if (type === "in" && this.scale < MAX_SCALE) {
this.scale = (this.scale * 100 + ZOOM_BASE * 100) / 100;
} else if (type === "out" && this.scale > MIN_SCALE) {
this.scale = (this.scale * 100 - ZOOM_BASE * 100) / 100;
}
this.styleObj = {
transition: `transform ${this.interVal}`,
transform: `scale(${this.scale}) rotate(${this.rotate}deg)`
};
this.isDone = false;
clearTimeout(timer);
}, INTERVAL);
},
// 鼠标滚轮事件
onWheel(event) {
event.deltaY < 0 ? this.onZoom("in") : this.onZoom("out");
},
4、旋转
原理：改变图片样式，使用css3
onRotate(type) {
if (this.isDone) return;
this.isDone = true;
const timer = setTimeout(() => {
if (type === "left") {
this.rotate = this.rotate - ROTATE_BASE;
} else {
this.rotate = this.rotate + ROTATE_BASE;
}
this.styleObj = {
transition: `transform ${this.interVal}`,
transform: `scale(${this.scale}) rotate(${this.rotate}deg)`
};
this.isDone = false;
clearTimeout(timer);
}, INTERVAL);
},
5、切换图片
原理，这个就比较容易了，主要是切换图片索引就可以
onPrev() {
if (this.curIndex <= 0) return;
this.curIndex -= 1;
this.originUrl = this.previewList[this.curIndex];
this.onReset();
},
// 下一张
onNext() {
if (this.curIndex >= this.previewList.length - 1) return;
this.curIndex += 1;
this.originUrl = this.previewList[this.curIndex];
this.onReset();
},
6、删除图片
这里主要使用子传父来实现，这里就不描述了文章来源：https://www.toymoban.com/news/detail-802061.html
7、使用
在某一个vue文件中引入并传入图片列表即可文章来源地址https://www.toymoban.com/news/detail-802061.html
<PreviewImg
:isShowImg="false"
:previewList="list"
/>
这样就实现啦，其实原理很简单
到了这里，关于vue2自定义封装图片预览组件的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
