Vue 动态修改 CSS 中的伪元素伪类属性（::before/::after）【前端随笔-Vue篇】

原因

由于vue样式中无法直接读取变量，也就无法动态修改伪元素::before``::after或伪类:hover的属性；

思路

通过动态修改css变量，伪类样式中读取css变量来实现；

---

例子

组件背景色props提供，应用于组件的伪类；

<template>
  <div class="container" :style="{'--bg-color': bgColor}">
    <div class="box front"></div>
    <div class="box back"></div>
  </div>
</template>

<script>
  export default {
    props: {
      bgColor: {
        type: String,
        default: '#000'
      }
    }
  }
</script>

<style lang="scss" scoped>
.container {
  .box::before,
  .box::after {
    background: var(--bg-color);
  }
}
</style>

---

注

这种方法一般在复杂样式组件，动态样式必须在伪类中才使用；如果能直接给元素设置就不要用这种方法（如下）:

<template>
	<div class="container" :style="{background: bgColor}">
		xxx
	</div>
</template>

<script>
  export default {
    props: {
      bgColor: {
        type: String,
        default: '#000'
      }
    }
  }
</script>

---