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;
}