data:
deg:90,
scale:0
methods:
rotate(type){
if(type == 'big'){
if(this.scale > 5){
this.$message.info('已经是最大了')
return
}
this.scale++
this.$refs.imgRef.style.transform = `rotate(${this.deg}deg) scale(1.${this.scale})`
return
}
if(type == 'small'){
if(this.scale <= 0){
this.$message.info('已经是最小了')
return
}
this.scale--
this.$refs.imgRef.style.transform = `rotate(${this.deg}deg) scale(1.${this.scale})`
return
}
if(this.deg >= 360){
this.deg = 0
this.deg += 90
this.$refs.imgRef.style.transform = `rotate(${this.deg}deg) scale(1.${this.scale})`
}else{
this.deg += 90
this.$refs.imgRef.style.transform = `rotate(${this.deg}deg) scale(1.${this.scale})`
}
},
dom:
<div style="zoom: 50%;position: absolute;opacity: 0.5; width: 100%; text-align: center; z-index: 1;">
<el-button
style="width:100px"
type="primary"
@click="rotate()">旋转</el-button>
<el-button
style="width:100px"
type="primary"
@click="rotate('big')">放大</el-button>
<el-button
style="width:100px"
type="primary"
@click="rotate('small')">缩小</el-button>
</div>
<img ref="imgRef" style="width:100%;height:100%" :src="dialogImageUrl" alt="" />
</div>
vue 图片旋转 放大缩小
最新推荐文章于 2024-08-22 19:25:52 发布