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 相关文章推荐
jQuery 过滤方法filter()选择具有特殊属性的元素
Jun 15 Javascript
javascript函数自动执行常用方法汇总
Mar 28 Javascript
JavaScript中函数声明与函数表达式的区别详解
Aug 18 Javascript
jQuery点击导航栏选中更换样式的实现代码
Jan 23 Javascript
jquery实现折叠菜单效果【推荐】
Mar 08 Javascript
Async Validator 异步验证使用说明
Jul 03 Javascript
mpvue中配置vuex并持久化到本地Storage图文教程解析
Mar 15 Javascript
基于vue展开收起动画的示例代码
Jul 05 Javascript
elementUI中Table表格问题的解决方法
Dec 04 Javascript
微信小程序登录态和检验注册过没的app.js写法
May 22 Javascript
java实现单链表增删改查的实例代码详解
Aug 30 Javascript
Vue 监听元素前后变化值实例
Jul 29 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
zend framework多模块多布局配置
2011/02/26 PHP
PHP中限制IP段访问、禁止IP提交表单的代码
2011/04/23 PHP
mysql,mysqli,PDO的各自不同介绍
2012/09/19 PHP
php实现汉字验证码和算式验证码的方法
2015/03/07 PHP
PHP中的使用curl发送请求(GET请求和POST请求)
2017/02/08 PHP
Alliance vs Liquid BO3 第二场2.13
2021/03/10 DOTA
JQuery表格内容过滤的实现方法
2013/07/05 Javascript
jQuery中prev()方法用法实例
2015/01/08 Javascript
jQuery scrollFix滚动定位插件
2015/04/01 Javascript
JS动态改变浏览器标题的方法
2016/04/06 Javascript
详解js的视频和音频采集
2018/08/09 Javascript
vue点击input弹出带搜索键盘并监听该元素的方法
2018/08/25 Javascript
vue element 中的table动态渲染实现(动态表头)
2019/11/21 Javascript
vue实现信息管理系统
2020/05/30 Javascript
解决Echarts2竖直datazoom滑动后显示数据不全的问题
2020/07/20 Javascript
使用原生javascript开发计算器实例代码
2021/02/21 Javascript
python使用MySQLdb访问mysql数据库的方法
2015/08/03 Python
使用Python导出Excel图表以及导出为图片的方法
2015/11/07 Python
使用Pyinstaller的最新踩坑实战记录
2017/11/08 Python
python用quad、dblquad实现一维二维积分的实例详解
2019/11/20 Python
Pytorch 实现sobel算子的卷积操作详解
2020/01/10 Python
keras 读取多标签图像数据方式
2020/06/12 Python
Python爬虫代理池搭建的方法步骤
2020/09/28 Python
Python爬虫scrapy框架Cookie池(微博Cookie池)的使用
2021/01/13 Python
纯CSS3实现3D旋转书本效果
2016/03/21 HTML / CSS
美国单身专业人士在线约会网站:EliteSingles
2019/03/19 全球购物
Traffic People官网:女式花裙、上衣和连身裤
2020/10/12 全球购物
JAVA程序设计笔试题面试题一套
2015/07/28 面试题
接受捐赠答谢词
2014/01/27 职场文书
初中生期末评语大全
2014/04/24 职场文书
经营目标管理责任书
2014/07/25 职场文书
上班迟到检讨书
2014/09/15 职场文书
安全生产感想
2015/08/07 职场文书
2016道德模范先进事迹材料
2016/02/26 职场文书
利用python调用摄像头的实例分析
2021/06/07 Python
B站评分公认最好看的动漫,你的名字评分9.9,第六备受喜欢
2022/03/18 日漫