今天产品提出了一个查看影像的功能需求。
在查看单据的列表中，有一列是影像字段，一开始根据单据号调用接口查看是否有图片附件，如果有则弹出一个全屏的弹出层，如果没有给出提示。而且，从列表进入详情之后，附件那边也会有一个查看影像的按钮。
所以，根据需求，多个组件需要用到查看影像的功能，所以考虑做一个公用组件，通过组件传值的方法将查看影像文件的入参传过去。
后来，产品要求图片可以旋转缩放。
废话不多说，贴上代码：
<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="furl" ref="singleImg" class="originStyle">
</p>
</div>
</div>
</el-dialog>
</div>
</template>
<script>
import {isgetFilePath}from 'api/public_api.js'
export default {
data() {
return {
imgList:[],
imgListShow:false,
num:0,
furl:'',
currentImg:1,
changeColor:-1,
currentRotate: 0 ,
currentScale:1,
