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 相关文章推荐
JavaScript Event学习第七章 事件属性
Feb 07 Javascript
juqery 学习之五 文档处理 包裹、替换、删除、复制
Feb 11 Javascript
JQuery里选择超链接的实现代码
May 22 Javascript
解释&amp;&amp;和||在javascript中的另类用法
Jul 28 Javascript
Java File类的常用方法总结
Mar 18 Javascript
jQuery EasyUI学习教程之datagrid点击列表头排序
Jul 09 Javascript
轻松掌握JavaScript享元模式
Aug 27 Javascript
微信小程序 数据访问实例详解
Oct 08 Javascript
基于Vue如何封装分页组件
Dec 16 Javascript
使用vue.js实现checkbox的全选和多个的删除功能
Feb 17 Javascript
微信小程序项目总结之记账小程序功能的实现(包括后端)
Aug 20 Javascript
jQuery实现简单轮播图效果
Dec 27 jQuery
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
sqlyog 中文乱码问题的设置方法
2008/10/19 PHP
ThinkPHP Mobile使用方法简明教程
2014/06/18 PHP
php实现批量压缩图片文件大小的脚本
2014/07/04 PHP
php中实现可以返回多个值的函数实例
2015/03/21 PHP
10个值得深思的PHP面试题
2016/11/14 PHP
php遍历目录下文件并按修改时间排序操作示例
2019/07/12 PHP
jQuery使用手册之一
2007/03/24 Javascript
jQuery prev ~ siblings选择器使用介绍
2013/08/09 Javascript
javascript调试之DOM断点调试法使用技巧分享
2014/04/15 Javascript
uploadify多文件上传参数设置技巧
2015/11/16 Javascript
Highcharts学习之数据列
2016/08/03 Javascript
自动化测试读写64位操作系统的注册表
2016/08/15 Javascript
JS作用域链详解
2017/06/26 Javascript
JavaScript学习总结之正则的元字符和一些简单的应用
2017/06/30 Javascript
ReactNative Image组件使用详解
2017/08/07 Javascript
JavaScript执行环境及作用域链实例分析
2018/08/01 Javascript
微信小程序自定义select下拉选项框组件的实现代码
2018/08/28 Javascript
基于vue中keep-alive缓存问题的解决方法
2018/09/21 Javascript
JS回调函数原理与用法详解【附PHP回调函数】
2019/07/20 Javascript
微信小程序实现手势滑动效果
2019/08/26 Javascript
记录vue做微信自定义分享的一些问题
2019/09/12 Javascript
python实现浪漫的烟花秀
2019/01/30 Python
Python基于jieba, wordcloud库生成中文词云
2020/05/13 Python
python中pandas库中DataFrame对行和列的操作使用方法示例
2020/06/14 Python
Python进行特征提取的示例代码
2020/10/15 Python
小米旗下精品生活电商平台:小米有品
2018/12/18 全球购物
Nayomi官网:沙特阿拉伯王国睡衣和内衣品牌
2020/12/19 全球购物
六月份红领巾广播稿
2014/02/03 职场文书
生物科学专业职业规划书范文
2014/02/11 职场文书
《桥》教学反思
2014/04/09 职场文书
乡镇党的群众路线对照检查材料
2014/09/24 职场文书
党的群众路线教育实践活动整改方案
2014/10/28 职场文书
会计求职自荐信范文
2015/03/04 职场文书
2015年卫生监督工作总结
2015/05/21 职场文书
使用qt quick-ListView仿微信好友列表和聊天列表的示例代码
2021/06/13 Python
MySQL空间数据存储及函数
2021/09/25 MySQL