今天产品提出了一个查看影像的功能需求。
在查看单据的列表中,有一列是影像字段,一开始根据单据号调用接口查看是否有图片附件,如果有则弹出一个全屏的弹出层,如果没有给出提示。而且,从列表进入详情之后,附件那边也会有一个查看影像的按钮。
所以,根据需求,多个组件需要用到查看影像的功能,所以考虑做一个公用组件,通过组件传值的方法将查看影像文件的入参传过去。
后来,产品要求图片可以旋转缩放。
废话不多说,贴上代码:
& lt; template>
& lt; div类=癴ilePreview”比;
& lt; el-dialog
类=" imgList "
title=霸だ劳计斜怼?
:visible.sync=" imgListShow”
@close=" $排放(“删除”)”
fullscreen>
& lt; div类=癮llImg”比;
& lt; div比;
& lt; img v=?项目、索引)imgList”:关键="项目。文件标识”:src=" https://www.yisu.com/zixun/item.furl ":类=" {changeColor: changeColor==指数}" @click=" handlerImg(项目、索引)”在
& lt;/div>
& lt;/div>
& lt; div比;
& lt; el-pagination
背景
@size-change=" handleSizeChange "
@current-change=" handleCurrentChange1 "
:current-page.sync=" currentImg”
:页面大??”
布局="上一页,寻呼机,接下来,跳投”
:总=皀um”比;
& lt;/el-pagination>
& lt; div比;
& lt;按钮@click==癳l-icon-arrow-left”比“rotateL”图标;
& lt;我类=" el-icon-arrow-left "祝辞& lt;/i>左旋转
& lt;/button>
& lt;按钮@click="旋转"在右旋转
& lt;我类=" el-icon-arrow-right "祝辞& lt;/i>
& lt;/button>
& lt;按钮@click=肮婺！北?
& lt;我类=" el-icon-zoom-out "祝辞& lt;/i>缩小
& lt;/button>
& lt;按钮@click=" scale1 "祝辞放大
& lt;我类=" el-icon-zoom-in "祝辞& lt;/i>
& lt;/button>
& lt;/div>
& lt; div id=皌est_3 @mousemove”=耙贫盄mouseup=巴Ｖ埂北?
& lt; p @mousedown=翱肌北?
& lt; img src=" https://www.yisu.com/zixun/furl " ref=皊ingleImg”类=皁riginStyle”比;
& lt;/p>
& lt;/div>
& lt;/div>
& lt;/el-dialog>
& lt;/div>
& lt;/template>
& lt; script>
从“api/public_api.js”进口{isgetFilePath}
出口默认{
数据(){
返回{
imgList: [],
imgListShow:假的,
num: 0,
卷起:”,
currentImg: 1、
changeColor: 1、
currentRotate: 0,
currentScale: 1、
canDrag:假的,
offset_x: 0,
offset_y: 0,
mouse_x: 0,
mouse_y: 0,
}
},
道具:“filePreviewShow”、“FDJH”,
创建(){
这一点。imgListShow=this.filePreviewShow
this.preview ()
},
方法:{//点击图片显示
handlerImg (obj,指数){
这一点。currentRotate=0
这一点。currentScale=1
this.rotateScale ()
refs.singleImg.style美元。左=0
refs.singleImg.style美元。顶级=0
这一点。卷起=obj.furl
这一点。changeColor=指数
这一点。currentImg=指数+ 1
},//影像
预览(){
让数据=https://www.yisu.com/zixun/{//FDJH:“000002”
FDJH: this.FDJH
}
isgetFilePath(数据)(res=祝辞{//console.log (res)
如果(res)。类型==癝”) {
这一点。imgList=JSON.parse (res.MESSAGE)
这一点。num=this.imgList.length
如果(this.imgList。长度比;0){
这一点。卷起=this.imgList [0] .furl
这一点。changeColor=0
其他}{
message.warning美元。(“影像文件为空的)
}
其他}{
美元。message.warning (res.MESSAGE)
}
})
},
handleSizeChange (val) {
控制台。日志(“每页$ {val}条”);
},
handleCurrentChange1 (val) {
这一点。currentRotate=0
这一点。currentScale=1
this.rotateScale ()
refs.singleImg.style美元。左=0
refs.singleImg.style美元。顶级=0
这一点。卷起=this.imgList val-1 .furl
这一点。changeColor=val-1
},
开始(e) {//鼠标左键点击
e。preventDefault,,e.preventDefault ();//去掉图片拖动响应
如果(e.button==0) {
this.canDrag=true;//获取需要拖动节点的坐标
这一点。offset_x=document.getElementsByClassName (originStyle) [0] .offsetLeft;//x坐标
这一点。offset_y=document.getElementsByClassName (originStyle) [0] .offsetTop;//y坐标//获取当前鼠标的坐标
这一点。mouse_x=e.pageX;
这一点。mouse_y=e.pageY;
}
},
移动(e) {
e。preventDefault,,e.preventDefault ()
如果(this.canDrag==true) {
让值=e。pageX - this.mouse_x;
让_y吗=e。pageY - this.mouse_y;//设置移动后的元素坐标
让now_x=(。offset_x +值)+“px”;
让now_y=(。offset_y + _y吗)+“px”;
document.getElementsByClassName (originStyle) [0] .style。顶级=now_y
document.getElementsByClassName (originStyle) [0] .style。左=now_x
}
},
停止(e) {
这一点。canDrag=false;
},//旋转放大
rotateScale () {
refs.singleImg.style美元。OTransform='旋转(' + this.currentRotate + '度)”+“规模(' + this.currentScale + ') '
refs.singleImg.style美元。webkitTransform='旋转(' + this.currentRotate + '度)”+“规模(' + this.currentScale + ') '
refs.singleImg.style美元。MozTransform='旋转(' + this.currentRotate + '度)”+“规模(' + this.currentScale + ') '
refs.singleImg.style美元。msTransform='旋转(' + this.currentRotate + '度)”+“规模(' + this.currentScale + ') '
refs.singleImg.style美元。变换='旋转(' + this.currentRotate + '度)”+“规模(' + this.currentScale + ') '
},//旋转
rotateL () {
这一点。currentRotate +=15
this.rotateScale ()
},
旋转(){
这一点。currentRotate -=15
this.rotateScale ()
},//缩放
规模(){
这一点。currentScale -=0.1
如果这一点。currentScale & lt;=0.1) {
这一点。currentScale=0.1
this.rotateScale ()
其他}{
this.rotateScale ()
}
},
scale1 () {
这一点。currentScale +=0.1
this.rotateScale ()
},
}
}
& lt;/script>
& lt;风格rel="样式表/scss“lang=皊css slot-scope”=胺段А北?
.filePreview {
.imgList {
.el-dialog__headerbtn {
字体大小:26 px;
}
.el-dialog__body {
.allImg {
宽度:30%;
浮:左;
身高:600 px;
img {
宽度:150 px;
身高:150 px;
保证金:5 px;
光标:指针;
}
.changeColor {
边界:4 px固体# 409 eff;
}
}
}
}
.originStyle {
位置:绝对的;
左:0;:0;
光标:指针;//transform-origin: 50% - 50%;
}
# test_3 {
位置:相对;
宽度:600 px;
身高:400 px;
溢出:隐藏;//溢出:滚动;
,比;p {
位置:绝对的;
光标:移动;
transform-origin:中心;
宽度:100%;
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
