vue 动态修改插件样式

一般vue中动态修改样式会用:class、:style方法，用行内样式解决，但是利用插件时有些情况需要覆盖样式，不能在行内，需要在<style></style>中，那怎么将变量放到style中呢？

首先了解var()函数的基本使用

var(custom-property-name, value)

值	描述
custom-property-name	必需。自定义属性的名称（必须以两个破折号开头）。
value	可选。回退值（在自定义属性无效时使用）。

:root {
 --bg-color: red; 
}

#div1 {
 background-color: var(--bg-color); 
}

#div2 {
 background-color: var(--bg-color);
}

在vue中应用

1.需要动态修改css的父元素或本身添加:style 设置css变量名，并绑定vue一个动态变量

<div class="row" :style="`width:${formParams.inputWidth}px;`">
    <div class="key">您的姓名</div>
    <el-input
      class="value"
      placeholder="请输入您的姓名"
      v-model="form.VName"
      :style="{ '--inputHeight': `${formParams.inputHeight}px` }"
      maxlength="4"
    />
</div>

2.利用var函数使用该变量

<style>
    .row input {
      height: var(--inputHeight);
    }
</style>

相关阅读 blog.csdn.net/qq_42459742…