平时我们使用的radio组件框是以下样式,官方基础用法。
<template>
<el-radio v-model="radio" label="1">备选项</el-radio>
<el-radio v-model="radio" label="2">备选项</el-radio>
</template>
<script>
export default {
data () {
return {
radio: '1'
};
}
}
</script>
当我们想要实现内实心圆的样式时,可以进行以下配置来修改该radio按钮样式。
样式图:
代码用以下代码给其进行添加,即可实现如上图所示效果
.el-radio__input.is-checked .el-radio__inner {
border-color: #0052d9;
background: none;
}
.el-radio__input.is-checked .el-radio__inner::after {
width: 7px;
height: 7px;
border-radius: 3px;
background: #0052d9;
}