Vue+ElementUI顶部radio选项卡自设计样式

动机:ElementUI自带的radio单选框样式不太喜欢

Element自带radio选项卡样式
Vue+ElementUI顶部radio选项卡自设计样式_第1张图片
想要的效果(自行设计实现):
Vue+ElementUI顶部radio选项卡自设计样式_第2张图片
HTML代码

<el-radio-group v-model="timeMode" size="medium" class="topTab">
    <el-radio-button label="单日">el-radio-button>
    <el-radio-button label="时间集成">el-radio-button>
    <el-radio-button label="时间序列">el-radio-button>
el-radio-group>

SCSS代码

.topTab{
    user-select: none;  //禁止用户选中文字
    width: 100%;
    display: flex;
    border-bottom: 1px solid #DCDFE6;
    >::v-deep.el-radio-button{
        // width: 33.3%;
        flex: 1 1;
        .el-radio-button__inner{
            width: 100%;
            border: none;
        }
        &:first-child .el-radio-button__inner{
            border-left: none;
            border-radius: 0;
        }
        &:last-child .el-radio-button__inner{
            border-left: none;
            border-radius: 0;
        }
        &:focus{
            box-shadow: none;
        }
    }
    >::v-deep.is-active .el-radio-button__inner{    //修改radio选中后效果
        color: #409EFF;
        background-color: #FFF;
        box-shadow: inset 0 -2px 0 0 #409EFF !important;
    }
}

你可能感兴趣的:(Vue,html,css,vue)