vue中动态设置style样式和使用filters过滤器设置样式

ゝ一世哀愁。 2022-09-01 13:48 189阅读 0赞

例如：想给图片增加高度和宽度

<el-image :class="classRotation"
          v-if="imageData.src !== undefined"
          :src="imageData.src"
          :style="imageStyle">
    </el-image>
     
    //在data中声明 imageStyle
    data(){
       return{
         imageData:{},
         imageStyle :{}, //样式参数对象
         classRotation:'',
         positionAndSizeData:{}
       }
    },

我这里的业务场景是监听 positionAndSizeData 数据变化设置样式（imageStyle）：

watch:{
       positionAndSizeData:{
          handler(){
            //通过this.$set('目标数据','key','value');给imageStyle 追加数据
            this.$set(this.imageStyle,'height',this.positionAndSizeData.h + 'px');
            this.$set(this.imageStyle,'width',this.positionAndSizeData.w + 'px'); 
          },
          deep:true,
          immediate:true
       },
    },

使用filters过滤器设置样式：

<div v-if="properties.property.json.type=='1'">
        
        <span v-if="properties.property.json.label.show" 
              :style="properties.property.json.label|styleFilter"> 
              {
       {properties.property.json.label.value}}
        </span>
    </div>
    filters: {
       styleFilter(val) {
         return {
           'fontSize': val.fontSize + 'px',
           'color': val.color,
           'letterSpacing': val.letterSpacing + 'px',
           'fontWeight': val.fontWeight
         }
       }
    },
    //或者处理完后return出去
    // filters: {
    //   styleFilter(val) {
    //     let temp = JSON.parse(JSON.stringify(val));
    //     temp['fontSize'] = val['fontSize'] + 'px'
    //     temp['letterSpacing'] = val['letterSpacing'] + 'px'
    //     return temp
    //   }
    // },