快捷導(dǎo)航

vue項(xiàng)目中實(shí)現(xiàn)圖片預(yù)覽的公用組件功能

更新時(shí)間：2018年10月26日 16:40:57 作者：空一座舊城，守一個(gè)舊人

小編接到查看影像的功能需求，根據(jù)需求，多個(gè)組件需要用到查看影像的功能，所以考慮做一個(gè)公用組件，通過(guò)組件傳值的方法將查看影像文件的入?yún)鬟^(guò)去。下面小編通過(guò)實(shí)例代碼給大家分享vue項(xiàng)目中實(shí)現(xiàn)圖片預(yù)覽的公用組件功能，需要的朋友參考下吧

今天產(chǎn)品提出了一個(gè)查看影像的功能需求。

在查看單據(jù)的列表中，有一列是影像字段，一開(kāi)始根據(jù)單據(jù)號(hào)調(diào)用接口查看是否有圖片附件，如果有則彈出一個(gè)全屏的彈出層，如果沒(méi)有給出提示。而且，從列表進(jìn)入詳情之后，附件那邊也會(huì)有一個(gè)查看影像的按鈕。

所以，根據(jù)需求，多個(gè)組件需要用到查看影像的功能，所以考慮做一個(gè)公用組件，通過(guò)組件傳值的方法將查看影像文件的入?yún)鬟^(guò)去。

后來(lái)，產(chǎn)品要求圖片可以旋轉(zhuǎn)縮放。

廢話不多說(shuō)，貼上代碼：

<template>
  <div class="filePreview">
    <el-dialog 
    class="imgList" 
    title="預(yù)覽圖片列表" 
    :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>左旋轉(zhuǎn)
        </button>
        <button @click="rotateR">右旋轉(zhuǎn)
          <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: {
      //點(diǎn)擊圖片顯示
      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(`每頁(yè) ${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){
        //鼠標(biāo)左鍵點(diǎn)擊
        e.preventDefault && e.preventDefault(); //去掉圖片拖動(dòng)響應(yīng)
        if(e.button==0){
          this.canDrag=true;
          //獲取需要拖動(dòng)節(jié)點(diǎn)的坐標(biāo)
          this.offset_x = document.getElementsByClassName('originStyle')[0].offsetLeft;//x坐標(biāo)
          this.offset_y = document.getElementsByClassName('originStyle')[0].offsetTop;//y坐標(biāo)
          //獲取當(dāng)前鼠標(biāo)的坐標(biāo)
          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;
          //設(shè)置移動(dòng)后的元素坐標(biāo)
          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;
      },
      //旋轉(zhuǎn)放大
      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+')'
      },
      //旋轉(zhuǎn)
      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>

后來(lái)出現(xiàn)一個(gè)問(wèn)題，有一類的單據(jù)的圖片存儲(chǔ)在數(shù)據(jù)庫(kù)中，之前的圖片都是存儲(chǔ)在服務(wù)器中，只需要傳入單據(jù)號(hào)查詢返回給我圖片路徑即可。

而存儲(chǔ)在數(shù)據(jù)庫(kù)當(dāng)中不一樣，需要拼接路徑，一下是解決方法：

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 //接口加入?yún)?
      })
    }
    this.num = this.imgList.length
    this.furl = this.imgList[0].furl
    this.changeColor = 0
},

一般情況下，圖片的預(yù)覽，圖片存儲(chǔ)在服務(wù)器中，數(shù)據(jù)庫(kù)中一般只存儲(chǔ)路徑。

總結(jié)

以上所述是小編給大家介紹的vue項(xiàng)目中實(shí)現(xiàn)圖片預(yù)覽的公用組件功能，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: