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

一般情况下，图片的预览，图片存储在服务器中，数据库中一般只存储路径。
我们后端我也是醉了，尽给我找事情，说起来都是泪。