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的树控件实现代码(asp.net+json)
Jul 11 Javascript
jQuery在vs2008及js文件中的无智能提示的解决方法
Dec 30 Javascript
使用Math.floor与Math.random取随机整数的方法详解
May 07 Javascript
JavaScript中常用的六种互动方法示例
Mar 13 Javascript
对Web开发中前端框架与前端类库的一些思考
Mar 27 Javascript
JS获取鼠标选中的文字
Aug 10 Javascript
node.js入门教程之querystring模块的使用方法
Feb 27 Javascript
微信小程序使用picker实现时间和日期选择框功能【附源码下载】
Dec 11 Javascript
ES6 系列之 WeakMap的使用示例
Aug 06 Javascript
JS判断数组里是否有重复元素的方法小结
May 21 Javascript
详解如何使用React Hooks请求数据并渲染
Oct 18 Javascript
Nest.js参数校验和自定义返回数据格式详解
Mar 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
PHP入门之常量简介和系统常量
2014/05/12 PHP
Discuz7.2版的faq.php SQL注入漏洞分析
2014/08/06 PHP
PHP实现无限极分类图文教程
2014/11/25 PHP
thinkphp5实现微信扫码支付
2019/12/23 PHP
jquery 弹出层注册页面等(asp.net后台)
2010/06/17 Javascript
奉献给JavaScript初学者的编写开发的七个细节
2011/01/11 Javascript
jQuery ajax 路由和过滤器使用说明
2011/08/02 Javascript
JS实现拖动示例代码
2013/11/01 Javascript
JavaScript中操作字符串小结
2015/05/04 Javascript
详解JavaScript节流函数中的Throttle
2016/07/16 Javascript
用jQuery的AJax实现异步访问、异步加载
2016/11/02 Javascript
BootStrap table使用方法分析
2016/11/08 Javascript
node.js缺少mysql模块运行报错的解决方法
2016/11/13 Javascript
jQuery 开发之EasyUI 添加数据的实例
2017/09/26 jQuery
layui select动态添加option的实例
2018/03/07 Javascript
JavaScript对象拷贝与Object.assign用法实例分析
2018/06/20 Javascript
JSON数据中存在单个转义字符“\”的处理方法
2018/07/11 Javascript
使用js在layui中实现上传图片压缩
2019/06/18 Javascript
js获取浏览器地址(获取第1个斜杠后的内容)
2019/09/03 Javascript
python结合API实现即时天气信息
2016/01/19 Python
Python利用matplotlib生成图片背景及图例透明的效果
2017/04/27 Python
python3使用SMTP发送HTML格式邮件
2018/06/19 Python
Python列表删除元素del、pop()和remove()的区别小结
2019/09/11 Python
使用turtle绘制五角星、分形树
2019/10/06 Python
Python字典中的值为列表或字典的构造实例
2019/12/16 Python
在python中list作函数形参,防止被实参修改的实现方法
2020/06/05 Python
python爬虫判断招聘信息是否存在的实例代码
2020/11/20 Python
python中温度单位转换的实例方法
2020/12/27 Python
HTML5未来发展趋势
2016/02/01 HTML / CSS
小学少先队活动方案
2014/02/18 职场文书
活动总结新闻稿
2014/08/30 职场文书
小学运动会入场词
2015/07/18 职场文书
mysql中between的边界,范围说明
2021/06/08 MySQL
使用qt quick-ListView仿微信好友列表和聊天列表的示例代码
2021/06/13 Python
MySQL中utf8mb4排序规则示例
2021/08/02 MySQL
mysql性能优化以及配置连接参数设置
2022/05/06 MySQL