今天产品提出了一个查看影像的功能需求。

在查看单据的列表中，有一列是影像字段，一开始根据单据号调用接口查看是否有图片附件，如果有则弹出一个全屏的弹出层，如果没有给出提示。而且，从列表进入详情之后，附件那边也会有一个查看影像的按钮。

所以，根据需求，多个组件需要用到查看影像的功能，所以考虑做一个公用组件，通过组件传值的方法将查看影像文件的入参传过去。

后来，产品要求图片可以旋转缩放。

废话不多说，贴上代码：

<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项目中实现图片预览的公用组件功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！