1.template中定义初始化变量
<el-tabs v-model="activeName" @tab-click="handleClick" :style="{'--tabcolor':tabcolor}" >
2.style中使用变量
<style lang="scss" scoped>
//$tabcolor:green;
// // >>>.el-tabs__item.is-active {
// // color: red;
// }
>>> .el-tabs__active-bar{
background-color: var(--tabcolor);
}
</style>
- script中使用修改变量
changeTabStyle(datatype){
if(datatype===""){
}
if(datatype=="imagedata"){
this.tabcolor="#46a6ff";
}
if(datatype=="querydata"){
this.tabcolor="green"
}
}
还有一种方法：
直接使用变量，不过script引用修改不太方便
<style lang="scss" scoped>
$color:red;
.scss_content{
color:$color;
}
</style>
