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

2020-06-14 06:21:04易采站长站整理

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
}
},