在vue中使用var()函数动态更改伪元素的css样式
在写vue项目中,有时候需要动态更改css中某个dom的伪元素属性,这时候就可以通过使用 var() 设置变量来动态更改
var()函数的使用
1.首先data里面定义一下要更改的变量属性
export default {
data () {
return {
beforeHeight: '18px'
}
},
}
2.在html代码中动态绑定属性
:style="{’- -beforeHeight’: beforeHeight}" 注意加- -
<van-tree-select
class="tree"
:style="{'--beforeHeight': beforeHeight}"
:items="items"
:active-id.sync="items.activeId"
:main-active-index.sync="items.activeId"
@click-nav="onNavClick">
</van-tree-select>
3. 在css中使用
.van-tree-select__nav::before{
content: "";
display:block;
width: 100%;
height: var(--beforeHeight);
border-radius: 0 0 9px 0;
background-color: #fff;
}