vue項目中實現圖片預覽的公用組件功能

<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,
 canDrag: false,
 offset_x:0,
 offset_y:0,
 mouse_x:0,
 mouse_y:0,
 }
 },
 props:['filePreviewShow','FDJH'],
 created() {
 this.imgListShow = this.filePreviewShow
 this.preview()
 },
 methods: {
 //點擊圖片顯示
 handlerImg(obj,index){
 this.currentRotate = 0
 this.currentScale = 1
 this.rotateScale()
 this.$refs.singleImg.style.left = 0
 this.$refs.singleImg.style.top = 0
 this.furl = obj.furl
 this.changeColor = index
 this.currentImg = index+1
 },
 //影像
 preview(){
 let data = {
 // FDJH:'000002'
 FDJH:this.FDJH
 }
 isgetFilePath(data).then(res=>{
 // console.log(res)
 if(res.TYPE == "S"){
 this.imgList = JSON.parse(res.MESSAGE)
 this.num = this.imgList.length
 if(this.imgList.length > 0){
 this.furl = this.imgList[0].furl
 this.changeColor = 0
 }else{
 this.$message.warning('影像文件為空')
 } 
 }else{
 this.$message.warning(res.MESSAGE)
 }
 })
 },
 handleSizeChange(val) {
 console.log(`每頁 ${val} 條`);
 },
 handleCurrentChange1(val) {
 this.currentRotate = 0
 this.currentScale = 1
 this.rotateScale()
 this.$refs.singleImg.style.left = 0
 this.$refs.singleImg.style.top = 0
 this.furl = this.imgList[val-1].furl
 this.changeColor = val-1
 },
 start(e){
 //鼠標左鍵點擊
 e.preventDefault && e.preventDefault(); //去掉圖片拖動響應
 if(e.button==0){
 this.canDrag=true;
 //獲取需要拖動節點的坐標
 this.offset_x = document.getElementsByClassName('originStyle')[0].offsetLeft;//x坐標
 this.offset_y = document.getElementsByClassName('originStyle')[0].offsetTop;//y坐標
 //獲取當前鼠標的坐標
 this.mouse_x = e.pageX;
 this.mouse_y = e.pageY;
 }
 },
 move(e){
 e.preventDefault && e.preventDefault()
 if(this.canDrag==true){
 let _x = e.pageX - this.mouse_x;
 let _y = e.pageY - this.mouse_y;
 //設置移動后的元素坐標
 let now_x = (this.offset_x + _x ) + "px";
 let now_y = (this.offset_y + _y ) + "px";
 document.getElementsByClassName('originStyle')[0].style.top = now_y
 document.getElementsByClassName('originStyle')[0].style.left = now_x
 }
 },
 stop(e){
 this.canDrag = false;
 },
 //旋轉放大
 rotateScale(){
 this.$refs.singleImg.style.OTransform = 'rotate('+this.currentRotate+'deg)'+'scale('+this.currentScale+')'
 this.$refs.singleImg.style.webkitTransform = 'rotate('+this.currentRotate+'deg)'+'scale('+this.currentScale+')'
 this.$refs.singleImg.style.MozTransform = 'rotate('+this.currentRotate+'deg)'+'scale('+this.currentScale+')'
 this.$refs.singleImg.style.msTransform = 'rotate('+this.currentRotate+'deg)'+'scale('+this.currentScale+')'
 this.$refs.singleImg.style.transform = 'rotate('+this.currentRotate+'deg)'+'scale('+this.currentScale+')'
 },
 //旋轉
 rotateL(){
 this.currentRotate += 15
 this.rotateScale()
 },
 rotateR(){
 this.currentRotate -= 15
 this.rotateScale()
 },
 //縮放
 scale(){
 this.currentScale -= 0.1
 if(this.currentScale <= 0.1){
 this.currentScale = 0.1
 this.rotateScale()
 }else{
 this.rotateScale()
 }
 },
 scale1(){
 this.currentScale += 0.1
 this.rotateScale()
 },
 }
 }
</script>
<style rel="stylesheet/scss" lang="scss" slot-scope="scope">
 .filePreview{
 .imgList{
 .el-dialog__headerbtn{
 font-size:26px;
 }
 .el-dialog__body{
 .allImg{
 width:30%;
 float:left;
 height:600px;
 img{
 width: 150px;
 height: 150px;
 margin: 5px;
 cursor: pointer;
 }
 .changeColor{
 border:4px solid #409eff;
 }
 }
 }
 }
 .originStyle{
 position:absolute;
 left:0;top:0;
 cursor: pointer;
 // transform-origin: 50% 50%;
 }
 #test_3{
 position: relative;
 width: 600px;
 height: 400px;
 overflow: hidden;
 // overflow: scroll;
 & > p{
 position: absolute;
 cursor: move;
 transform-origin: center;
 width: 100%;
 height: 100%;
 padding: 0;
 -webkit-margin-before: 0;
 -webkit-margin-after: 0;
 left: 0;
 top: 0;
 & > img{
 display: inline-block;
 vertical-align: middle;
 }
 }
 }
 }
</style>

preview(){

 if(this.imgList.length > 0){
 this.imgList.map(item=>{
 item.furl = process.env.APP_EXCEL_PATH+'portal/gys/querydownloadPurchaFile?fileid='+ item.FILEID +'&gysdh='+item.CREATENAME //接口加入參
 })
 }
 this.num = this.imgList.length
 this.furl = this.imgList[0].furl
 this.changeColor = 0
},