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
},

一般情况下，图片的预览，图片存储在服务器中，数据库中一般只存储路径。

总结

以上所述是小编给大家介绍的vue项目中实现图片预览的公用组件功能，希望对大家有所帮助