Vue前端实现动态style

在页面多态化的现在，前端动态样式已成为常态。目前市场上Vue大受欢迎，最近在探索动态style，请各位大家赐教。用法：1、常规用法vue元素中 :style="{‘styleName1’:value1,‘styleName2’:value2}"例：// An highlighted block<el-button class="dialog-button" :style="{'color':

王乐生

3259人浏览 · 2021-08-13 16:32:22

王乐生 · 2021-08-13 16:32:22 发布

在页面多态化的现在，前端动态样式已成为常态。
目前市场上Vue大受欢迎，最近在探索动态style，请各位大家赐教。
用法：

1、常规用法

vue元素中 :style="{‘styleName1’:value1,‘styleName2’:value2}"
例：

// An highlighted block
 <el-button class="dialog-button" :style="{'color': hitColor, 'border': borderColor(hitColor)}"></el-button>

其中hitColor为当前对象颜色值，borderColor()为js方法

borderColor(hitColor){
       return "1px solid"+ hitColor;
     }

当然，动态style（:style）中也可以使用常规的样式，不过格式需要改变下，需以英文逗号 , 分隔

2、进阶用法

在 :style中设置一个值

<el-checkbox 
:label="entityCode"       
:style="{'--color': hitColor,'padding': '10px 0','font-weight': 'bold','color':item.hitColor}">
<span>{{entityName}}</span>
</el-checkbox>

“- -color”为我们定义的变量名，那么在css中可以这样引用

::v-deep .el-checkbox {
       .el-checkbox__input.is-checked+.el-checkbox__label {
         color: var(--color);
       }

       .el-checkbox__input.is-checked .el-checkbox__inner,
       .el-checkbox__input.is-indeterminate .el-checkbox__inner {
         background-color: var(--color);
         border-color: var(--color)
      }
}