vue动态设置::before伪元素样式背景颜色

通过动态绑定style，声明css变量"--bgColor"，把变量”color”赋给“--bgColor”<div ref="chart-circle" class="chart-circle" :style="{ '--bgColor': color }"></div>在css中使用 var函数读取“--bgColor”变量.chart-circle {width:

codecz6

6877人浏览 · 2022-02-17 17:23:40

codecz6 · 2022-02-17 17:23:40 发布

通过动态绑定style，声明css变量"--bgColor"，把变量”color”赋给“--bgColor”

  <div ref="chart-circle" class="chart-circle" :style="{ '--bgColor': color }"></div>

在css中使用 var函数读取“--bgColor”变量

.chart-circle {
  width: 80px;
  height: 80px;
  position: relative;
  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--bgColor);
  }
}