css绘制 圆形内加一个勾,动态切换颜色

先看效果

切换前

切换后

dom

 <div style="display: flex; align-items: center; justify-content: space-between; height: 30px">
            <span id="yuan" :style="styleObject"></span>
            <span>申请单</span>
            <el-button @click="hahhahah(scope.row)" size="mini">
                <svg-icon icon-class="shangchuan_1" style="transform: scale(1.5)" />
            </el-button>
       </el-button>
 </div>

data

data(){
    return{
         styleObject: {
              width: "13px",
              height: "13px",
              borderRadius: "50%",
              backgroundColor: "#299b49",
      },
    }
}

methods

 hahhahah(row) {
      //需要加上$nextTick,否则dom不会发生变化
      this.$nextTick(() => {
      //点击时更换圆圈的背景色，重新赋值即可
        this.styleObject = {
          width: "13px",
          height: "13px",
          borderRadius: "50%",
          backgroundColor: "#9a9a9a",
        };
      });
    },

css

::v-deep #yuan::before {
  content: "";
  display: block;
  width: 8px;
  height: 5px;
  border: 2px solid #ffff;
  border-right: none;
  border-top: none; 
  top: -12px;
  transform: rotate(-45deg) translate(1px, 3px);  //rotate(旋转角度)  translate(x轴, y轴)
}