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

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

Element自带radio选项卡样式

想要的效果（自行设计实现）：

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