针对单选框有复选框再次点击一次取消这个问题,没有采取网上所说绑定事件解决,而是另辟蹊径,改动样式。请看下文:
1. 由于复选框element-ui具有点击一次选中,再次点击取消这个功能,因此利用el-checkbox复选框,代替单选框el-radio。
<el-checkbox v-model="checked">备选项</el-checkbox>
data() {
return {
checked: true, //默认选中
}
}
2. 但是,想要单选框的样式,如图:
则只改动样式即可。
3. 先把背景变成圆形
在style标签中,注:style标签不可加scope
添加border-radius属性,给方形加圆角
.el-checkbox__inner {
border-radius: 8px;
}
4. 样式修改
.el-checkbox__inner::after {
box-sizing: content-box;
content: "";
height: 8px;
width: 8px;
border-radius: 4px;
left: 3px;
position: absolute;
top: 3px;
transform: scaleY(0);
transition: transform .15s ease-in .05s;
transform-origin: center;
background-color: #fff;
border: none;
}
.el-checkbox__input.is-checked .el-checkbox__inner::after {
transform: scaleY(1);
}
未选中:
选中:
此时,单选框按钮已经有了点击一次选中,再点击一次取消选中的功能了(本质上还是复选框按钮)。