el-radio ：单个el-radio，Click 切换选中与取消状态

1.单个el-radio

1 .单个el-radio；
2 .Click 切换选中与取消状态；

---

---

html :
@click.prevent 阻止radio标签默认点击事件；

// 关键点： 阻止默认事件
<el-radio
      v-model="form.radio"
      label="1"
      @click.prevent="radioChange(form.radio)"
      >Option 1</el-radio
    >

---

vue.js : setup()

setup() {
    const radioState = reactive({
      form: {
        radio: "",
      },
      radioChange(value) {
        if (value === "1") {
          radioState.form.radio = "";
          return;
        }
        radioState.form.radio = "1";
      },
    });

    return {
      ...toRefs(radioState),
    };
  },

---

css : 样式
:deep() 穿透；

/* 单选radio自定义样式 */
:deep()
  .el-radio:focus:not(.is-focus):not(:active):not(.is-disabled)
  .el-radio__inner {
  box-shadow: 0 0 2px 2px #008454;
}
/* radio label选项文字 */
:deep() .el-radio .el-radio__label {
  color: red;
}
/* radio圆圈大小 */
:deep().el-radio__input .el-radio__inner {
  height: 24px;
  width: 24px;
}
/* 选中前：hover样式 */
:deep().el-radio__input .el-radio__inner:hover {
  border-color: #008454 !important;
}
/* 选中后：radio圆圈样式 */
:deep().el-radio__input.is-checked .el-radio__inner {
  background-color: #008454;
  border-color: #008454;
}
/* 选中后：radio圈内样式改为对勾 */
:deep().el-radio__input.is-checked .el-radio__inner::after {
  content: "";
  width: 12px;
  height: 6px;
  border: 2px solid white;
  border-top: transparent;
  border-right: transparent;
  text-align: center;
  display: block;
  position: absolute;
  top: 5px;
  left: 5px;
  vertical-align: middle;
  transform: rotate(-45deg);
  border-radius: 0px;
  background: none;
}