Today, the product proposed a functional requirement for viewing images.
In the list of viewing documents, there is a column that is an image field. At the beginning, call the interface according to the document number to check whether there are image attachments. If there is, a full-screen pop-up layer will pop up, and if no prompt is given. Moreover, after entering the details from the list, there will also be a button to view the image on the attachment.
Therefore, according to requirements, multiple components need to use the function of viewing images, so consider making a public component and passing the incoming parameters of the viewing image file through the component passing value.
Later, the product requires the image to be rotated and scaled.
Without further ado, post the code:
<template>
<div class="filePreview">
<el-dialog
class="imgList"
title="Preview Picture List"
:="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="" :src='' :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"
:="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>Rotate left
</button>
<button @click="rotateR">Rotate right
<i class="el-icon-arrow-right"></i>
</button>
<button @click="scale">
<i class="el-icon-zoom-out"></i>Shrink
</button>
<button @click="scale1">enlarge
<i class="el-icon-zoom-in"></i>
</button>
</div>
<div @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() {
=
()
},
methods: {
//Click on the picture to display handlerImg(obj,index){
= 0
= 1
()
this.$ = 0
this.$ = 0
=
= index
= index+1
},
//image preview(){
let data = {
// FDJH:'000002'
FDJH:
}
isgetFilePath(data).then(res=>{
// (res)
if( == "S"){
= ()
=
if( > 0){
= [0].furl
= 0
}else{
this.$('The image file is empty')
}
}else{
this.$()
}
})
},
handleSizeChange(val) {
(`Each page ${val} strip`);
},
handleCurrentChange1(val) {
= 0
= 1
()
this.$ = 0
this.$ = 0
= [val-1].furl
= val-1
},
start(e){
//Click the left mouse button && (); //Remove the image drag response if(==0){
=true;
//Get the coordinates of the node that need to be dragged this.offset_x = ('originStyle')[0].offsetLeft;//x coordinate this.offset_y = ('originStyle')[0].offsetTop;//y coordinate //Get the coordinates of the current mouse this.mouse_x = ;
this.mouse_y = ;
}
},
move(e){
&& ()
if(==true){
let _x = - this.mouse_x;
let _y = - this.mouse_y;
//Set the coordinates of the element after moving let now_x = (this.offset_x + _x ) + "px";
let now_y = (this.offset_y + _y ) + "px";
('originStyle')[0]. = now_y
('originStyle')[0]. = now_x
}
},
stop(e){
= false;
},
//Rotate and enlarge rotateScale(){
this.$ = 'rotate('++'deg)'+'scale('++')'
this.$ = 'rotate('++'deg)'+'scale('++')'
this.$ = 'rotate('++'deg)'+'scale('++')'
this.$ = 'rotate('++'deg)'+'scale('++')'
this.$ = 'rotate('++'deg)'+'scale('++')'
},
//Rotation rotateL(){
+= 15
()
},
rotateR(){
-= 15
()
},
//Zoom scale(){
-= 0.1
if( <= 0.1){
= 0.1
()
}else{
()
}
},
scale1(){
+= 0.1
()
},
}
}
</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>
Later, a problem occurred. There was a type of image of document in the database. The previous image was stored in the server. You only need to pass the document number in and query it and return it to me the image path.
However, storage in the database is different, and the path needs to be spliced. Here is the solution:
preview(){
if( > 0){
(item=>{
= .APP_EXCEL_PATH+'portal/gys/querydownloadPurchaFile?fileid='+ +'&gysdh='+ //Add to the interface })
}
=
= [0].furl
= 0
},
Generally speaking, the preview of the picture is stored in the server, and the database is generally only the path.
Summarize
The above is the public component function of the vue project that the editor introduced to you to realize image preview. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support for my website!