今天产品提出了一个查看影像的功能需求。
在查看单据的列表中，有一列是影像字段，一开始根据单据号调用接口查看是否有图片附件，如果有则弹出一个全屏的弹出层，如果没有给出提示。而且，从列表进入详情之后，附件那边也会有一个查看影像的按钮。
所以，根据需求，多个组件需要用到查看影像的功能，所以考虑做一个公用组件，通过组件传值的方法将查看影像文件的入参传过去。
后来，产品要求图片可以旋转缩放。
废话不多说，贴上代码：
<template>
<div class="filePreview">
<el-dialog
class="imgList"
title="预览图片列表"
:visible.sync="imgListShow"
@close="$emit('remove')"
fullscreen>
<div class="allImg">
<div style="width:200px;height:100%;margin-top:50px;overflow-y: auto;margin: 0 auto;">
<img v-for="(item,index) in imgList" :key="item.fileid" :src='item.furl' :class="{ changeColor:changeColor == index}" @click="handlerImg(item,index)">
</div>
</div>
<div style="width:70%;float:left">
<el-pagination
style="margin-bottom:20px;"
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange1"
:current-page.sync="currentImg"
:page-size="1"
layout="prev, pager, next, jumper"
:total="num">
</el-pagination>
<div style="width:50%;text-align:center;margin:20px 0">
<button @click="rotateL" icon="el-icon-arrow-left">
<i class="el-icon-arrow-left"></i>左旋转
</button>
<button @click="rotateR">右旋转
<i class="el-icon-arrow-right"></i>
</button>
<button @click="scale">
<i class="el-icon-zoom-out"></i>缩小
</button>
<button @click="scale1">放大
<i class="el-icon-zoom-in"></i>
</button>
</div>
<div id="test_3" @mousemove="move" @mouseup="stop">
<p @mousedown="start" >
<img :src="/UploadFiles/2021-04-02/furl">
后来出现一个问题，有一类的单据的图片存储在数据库中，之前的图片都是存储在服务器中，只需要传入单据号查询返回给我图片路径即可。
而存储在数据库当中不一样，需要拼接路径，一下是解决方法：
preview(){
if(this.imgList.length > 0){
this.imgList.map(item=>{
item.furl = process.env.APP_EXCEL_PATH+'portal/gys/querydownloadPurchaFile"color: #ff0000">总结
以上所述是小编给大家介绍的vue项目中实现图片预览的公用组件功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！