之前修改elementUI组件样式是在css文件里/deep/就行,如下所示:
&::v-deep {
.el-collapse{
border-top: none !important;
}
.el-collapse-item__wrap{
background-color: #2a4850;
border-bottom:none !important;
color:#29B1CC;
&::v-deep{
.el-collapse-item__content{
color:#29B1CC;
}
}
}
}
但是今天要修改的其样式是需要动态修改,我公司产品是有通过js文件在前端页面展示其css对应属性,所以用户可以自己去配置样式。就是把我们要用到的css样式动态写到js中,然后再引入到html样式中即可。可是想了半天都没想到elementUI的要怎么修改,最后在网上找到了,试了一下没想到是ok的,大家可以看一下:
css文件:
&::v-deep {
.el-collapse-item__header {
background-color: #0d475d;
//动态渲染
color: var(--textarea-color);
font-size: var(--textarea-size);
font-weight: var(--textarea-weight);
}
}
html文件:
<el-collapse-item :style="{ '--textarea-color': `${titleColor}`,
'--textarea-size':`${titleFontSize}`,
'--textarea-weight':`${titleFontWeight}`
v-for="(key, index) in propertyTable"
:title="key.title"
:name="index"
:key="key.name"
}">
</el-collapse-item>
js文件导出你定义的对应的值即可
这里再细说一下var()函数吧:
大家可以看这个博主的介绍: