vue项目中实现图片预览的公用组件功能-创新互联
今天产品提出了一个查看影像的功能需求。
在查看单据的列表中，有一列是影像字段，一开始根据单据号调用接口查看是否有图片附件，如果有则弹出一个全屏的弹出层，如果没有给出提示。而且，从列表进入详情之后，附件那边也会有一个查看影像的按钮。
所以，根据需求，多个组件需要用到查看影像的功能，所以考虑做一个公用组件，通过组件传值的方法将查看影像文件的入参传过去。
后来，产品要求图片可以旋转缩放。
废话不多说，贴上代码：
<template>
<div class="filePreview">
<el-dialog
class="imgList"
title="预览图片列表"
:visible.sync="imgListShow"
@close="$emit('remove')"
fullscreen>
<div class="allImg">
<div >
<img v-for="(item,index) in imgList" :key="item.fileid" :src='item.furl' :class="{ changeColor:changeColor == index}" @click="handlerImg(item,index)">
</div>
</div>
<div >
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange1"
:current-page.sync="currentImg"
:page-size="1"
layout="prev, pager, next, jumper"
:total="num">
</el-pagination>
<div >
<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>
本文标题：vue项目中实现图片预览的公用组件功能-创新互联
网站地址：https://www.cdcxhl.com/article48/cepcep.html
成都网站建设公司_创新互联，为您提供服务器托管、做网站、App设计、面包屑导航、网站排名、App开发
声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联
- 如何大幅度提高你的网站用户体验 2016-08-06
- 如做网站制作公司哪家好 2021-09-05
- 做网站如何做好SEO？ 2021-12-14
- 找人做网站要找怎样的网站建设公司 2021-04-23
- 现在做网站SEO优化时还需要做301跳转吗？ 2016-09-06
- 【网络公司】谈一谈做网站建造的优点以及效果 2022-10-24
- 如何以“贴膜”为关键词做网站推广 2016-09-02
- 淄博企业做网站：选择建站公司切勿因为价格便宜而选择！ 2021-10-19
- 做网站如何给网站定位，怎么定位？ 2021-12-13
- 做网站成功的基础是找一个好的网站设计公司 2021-02-02
- 做网站优化关键词是必不可少的 2021-07-09
- 为企业做网站的人员需要掌握哪些技能 2022-08-31