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>
后来出现一个问题，有一类的单据的图片存储在数据库中，之前的图片都是存储在服务器中，只需要传入单据号查询返回给我图片路径即可。
而存储在数据库当中不一样，需要拼接路径，一下是解决方法：
