好资源导航 » 文章资讯 » vue项目中实现图片预览的公用组件功能

vue项目中实现图片预览的公用组件功能

2023-09-06 14:33:04 239

今天产品提出了一个查看影像的功能需求。

在查看单据的列表中，有一列是影像字段，一开始根据单据号调用接口查看是否有图片附件，如果有则弹出一个全屏的弹出层，如果没有给出提示。而且，从列表进入详情之后，附件那边也会有一个查看影像的按钮。

所以，根据需求，多个组件需要用到查看影像的功能，所以考虑做一个公用组件，通过组件传值的方法将查看影像文件的入参传过去。

后来，产品要求图片可以旋转缩放。

废话不多说，贴上代码：




.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:4pxsolid#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;
}
}
}
}

后来出现一个问题，有一类的单据的图片存储在数据库中，之前的图片都是存储在服务器中，只需要传入单据号查询返回给我图片路径即可。

而存储在数据库当中不一样，需要拼接路径，一下是解决方法：

preview(){

if(this.imgList.length>0){
this.imgList.map(item=>{
item.https://www.haoziyuan.ccfurl=process.env.APP_EXCEL_PATH+'portal/gys/querydownloadPurchaFile?fileid='+item.FILEID+'&gysdh='+item.CREATENAME//接口加入参
})
}
this.num=this.imgList.length
this.https://www.haoziyuan.ccfurl=this.imgList[0].https://www.haoziyuan.ccfurl
this.changeColor=0
},

一般情况下，图片的预览，图片存储在服务器中，数据库中一般只存储路径。

总结

以上所述是小编给大家介绍的vue项目中实现图片预览的公用组件功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！

返回顶部
3162201930
czq8825@qq.com

vue项目中实现图片预览的公用组件功能

热门推荐

随机推荐