【Vue】在vue中使用var()函数动态更改伪元素的css样式

在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;
    }

4.最后如果想动态更改伪元素的属性，可以通过vue中的方法来改变this.beforeHeight的值就可以了