vue项目中实现图片预览的公用组件功能


Posted in Javascript onOctober 26, 2018

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

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

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

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

废话不多说,贴上代码:

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

Javascript 相关文章推荐
window.showModalDialog使用手册
Jan 11 Javascript
javascript下string.format函数补充
Aug 24 Javascript
深入理解JavaScript系列(1) 编写高质量JavaScript代码的基本要点
Jan 15 Javascript
js图片自动轮播代码分享(js图片轮播)
May 06 Javascript
js正则表达式中exec用法实例
Jul 23 Javascript
JavaScript+html5 canvas制作的圆中圆效果实例
Jan 27 Javascript
微信小程序开发经验总结(推荐)
Jan 11 Javascript
关于jquery layui弹出层的使用方法
Apr 21 jQuery
js实现继承的方法及优缺点总结
May 08 Javascript
深入了解JavaScript 的 WebAssembly
Jun 15 Javascript
Jquery实现获取子元素的方法分析
Aug 24 jQuery
微信小程序 this.triggerEvent()的具体使用
Dec 10 Javascript
Node.js 使用axios读写influxDB的方法示例
Oct 26 #Javascript
vue中使用protobuf的过程记录
Oct 26 #Javascript
iview通过Dropdown(下拉菜单)实现的右键菜单
Oct 26 #Javascript
Javascript中弹窗confirm与prompt的区别
Oct 26 #Javascript
Phaser.js实现简单的跑酷游戏附源码下载
Oct 26 #Javascript
如何用Node写页面爬虫的工具集
Oct 26 #Javascript
Javascript中绑定click事件的四种方式介绍
Oct 26 #Javascript
You might like
Views rows style模板重写代码
2011/05/16 PHP
PHPAnalysis中文分词类详解
2014/06/13 PHP
PHP Warning: Module 'modulename' already loaded in问题解决办法
2015/03/16 PHP
详解WordPress中调用评论模板和循环输出评论的PHP函数
2016/01/05 PHP
PHP 5.6.11中CURL模块问题的解决方法
2016/08/08 PHP
PHP vsprintf()函数格式化字符串操作原理解析
2020/07/14 PHP
Jquery常用技巧收集整理篇
2010/11/14 Javascript
Node.js 文件夹目录结构创建实例代码
2016/07/08 Javascript
使用do...while的方法输入一个月中所有的周日(实例代码)
2016/07/22 Javascript
在vue中通过axios异步使用echarts的方法
2018/01/13 Javascript
vue实现todolist功能、todolist组件拆分及todolist的删除功能
2019/04/11 Javascript
layer.open弹层查看缩略图的原图,自适应大小的实例
2019/09/05 Javascript
解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题
2019/10/25 Javascript
pandas DataFrame实现几列数据合并成为新的一列方法
2018/06/08 Python
Python pyinotify模块实现对文档的实时监控功能方法
2018/10/13 Python
使用django-guardian实现django-admin的行级权限控制的方法
2018/10/30 Python
Python线性拟合实现函数与用法示例
2018/12/13 Python
python 同时运行多个程序的实例
2019/01/07 Python
浅谈python已知元素,获取元素索引(numpy,pandas)
2019/11/26 Python
深入浅析python变量加逗号,的含义
2020/02/22 Python
Python3.6 + TensorFlow 安装配置图文教程(Windows 64 bit)
2020/02/24 Python
Python中使用filter过滤列表的一个小技巧分享
2020/05/02 Python
Ubuntu配置Pytorch on Graph (PoG)环境过程图解
2020/11/19 Python
python利用后缀表达式实现计算器功能
2021/02/22 Python
美国休闲服装品牌:J.Crew Factory
2017/03/04 全球购物
介绍一下如何利用路径遍历进行攻击及如何防范
2014/01/19 面试题
学院书画协会部门岗位职责
2013/12/01 职场文书
学前班教师的自我鉴定
2013/12/05 职场文书
光盘行动倡议书
2014/02/02 职场文书
国窖1573广告词
2014/03/21 职场文书
复兴之路观后感
2015/06/02 职场文书
优秀教师工作总结2015
2015/07/22 职场文书
离职员工给领导和同事的感谢信
2015/11/03 职场文书
2019学子的答谢词范本!
2019/07/05 职场文书
基于Redis结合SpringBoot的秒杀案例详解
2021/10/05 Redis
MYSQL优化之数据表碎片整理详解
2022/04/03 MySQL