vue 图片旋转放大缩小

缺乏、安全感 2022-12-17 12:53 252阅读 0赞

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>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221122/72db0a50f1ae42baacdd24f96096cc69.png