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>