element Radio 单选框 改对勾样式

<template>
  <div>
    <div class="strategyType">
      <span style="font-size: 18px; color: #333">单选按钮改对勾样式</span>
      <div
        class="strategyType-radio"
        v-for="item in radioList"
        :key="item.label"
      >
        <el-radio-group v-model="radio">
          <el-radio
            :label="item.label"
            border
            @change="StrategyClick(item.label)"
            >{{ item.value }}</el-radio
          >
        </el-radio-group>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      radio: 0,
      radioList: [{
        label: 0,
        value: '单选1',
        describe: '单选1'
      }, {
        label: 1,
        value: '单选2',
        describe: '单选2'
      },
      {
        label: 2,
        value: '单选3',
        describe: '单选3'
      }
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
.strategyType {
  display: flex;
  align-items: center;
  margin: 10px;

  .strategyType-radio {
    background: #ffffff;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    margin: 0 10px;
  }
}

::v-deep .el-radio__input.is-checked .el-radio__inner::after {
  content: "";
  width: 10px;
  height: 6px;
  border: 2px solid white;
  border-top: transparent;
  border-right: transparent;
  text-align: center;
  display: block;
  position: absolute;
  top: 2px;
  left: 1px;
  transform: rotate(-45deg);
  border-radius: 0px;
  background: none;
}
</style>