记录vue修改样式

 <div class="block">       
        <el-slider      
              @change="handleChangeSize"       
                v-model="watermarkForm.size"       
                :format-tooltip="formatTooltipSize" 
                 :min="minSize">     
      </el-slider> 
 </div>
<div class="block">   
     <el-slider       
              v-model="watermarkForm.rotate"       
             :format-tooltip="formatTooltipRotate"> 
     </el-slider> 
</div>
<div class="img-right">        
      <img 
            :src="watermarkForm.water_img"
             class="img-water" 
             v-show="watermarkForm.water_img" 
             ref="watermarkImg"
             :style="handleImgStyle"> 
 </div>

css

   .img-right {           
     position: relative;            
     // flex: 1;           
     width: 600px;            
     height: 600px;            
     background-image: url('../img/bg.jpg');           
     background-repeat: no-repeat;           
     background-size: 100% 100%;           
     overflow: hidden;           
    .img-water {                
      position: absolute;               
      z-index: 2;               
      max-width: 600px;           
  }        
}

data

watermarkForm: {     
 id: '',      
 model_name: '',     
 selleruser: '',      
 type: '1',      
 water_img: '',      
 size: 50,      
 opacity: 0,     
 rotate: 50,     
 position: '', },
 minSize： 10

页面

通过计算属性修改样式

  computed: {        
     handleImgStyle () {      
        let opacity = 1 - this.watermarkForm.opacity / 100;    
        let scale = this.watermarkForm.size * 2 /100;     
        let rotate = '';        
       if (this.watermarkForm.rotate ===0) {     
          rotate = '-50';        
       }else if (this.watermarkForm.rotate===50) {  
             rotate =  0;     
       } else {        
         rotate = `${this.watermarkForm.rotate-50}`         
       }          
      switch(this.watermarkForm.position) {    
          case 1:           
             return {'top': 0, 'left': 0, opacity: opacity, transform: `scale(${scale}) rotate(${rotate}deg)`};
          case 2:          
             return {'top': 0, 'left': '50%', transform: `translate(-50%, 0) scale(${scale}) rotate(${rotate}deg)`, opacity: opacity};
          case 3:          
             return {'top': 0, 'right': 0};     
          case 4:         
             return {'top': '50%', 'left': 0, transform: `translate(0, -50%) scale(${scale}) rotate(${rotate}deg)`, opacity: opacity};     
          case 5:        
             return {'top': '50%', 'left':'50%', transform: `translate(-50%, -50%) scale(${scale}) rotate(${rotate}deg)`, opacity: opacity};        
          case 6:        
             return {'top': '50%', 'right': 0, transform: `translate(0, -50%) scale(${scale}) rotate(${rotate}deg)`, opacity: opacity};             
          case 7:              
            return {'bottom': 0, 'left': 0, opacity: opacity, transform: `scale(${scale}) rotate(${rotate}deg)`};  
          case 8:       
             return {'bottom': 0, 'left': '50%', transform: `translate(-50%, 0) scale(${scale}) rotate(${rotate}deg)`, opacity: opacity};    
          case 9:     
               return {'bottom': 0, 'right': '0', opacity: opacity, transform: `scale(${scale}) rotate(${rotate}deg)`};   
          default:                
               return {'top': 0, 'left': 0, opacity: opacity, transform: `scale(${scale}) rotate(${rotate}deg)`};    
       }       
},

vue通过ref属性修改样式

<div ref="element"></div> 

this.$refs.element.width // 获取宽度
this.$refs.element.height// 获取高度
this.$refs.element.offsetWidth // 获取宽度值 （内容高+padding+边框）
this.$refs.element.offsetheight // 获取高度值 （内容高+padding+边框）