vue 图片旋转 放大缩小

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>