HTML
<el-radio-group v-model="form.radio">
<el-radio-button label="0">指定</el-radio-button>
<el-radio-button label="1">认领</el-radio-button>
<el-radio-button label="2">自荐</el-radio-button>
</el-radio-group>
CSS 修改样式
::v-deep .el-radio-button__inner {
width: 100px;
height: 36px;
border: 0 !important;
font-size: 14px;
font-weight: 400;
color: #696969;
line-height: 14px;
outline: none;
Box-shadow: none;
}
// 修改激活后的样式
::v-deep .el-radio-button__orig-radio:checked + .el-radio-button__inner {
background: #f2f2f2;
border: 0 !important;
color: #696969;
line-height: 14px;
outline: none;
Box-shadow: none;
}
设置默认值
data () {
return {
taskForm: {
taskTypeRadio: 0
},}
}
el-radio-button自定义样式和激活样式
需求是这样的
用的是el-radio-button
<el-radio-group v-model="staffInfo.sex">
<el-radio-button label="1">男</el-radio-button>
<el-radio-button label="2">女</el-radio-button>
</el-radio-group>
样式修改
::v-deep.el-radio-button{
margin-right: 15px;
border-radius:4px;
.el-radio-button__inner {//修改按钮样式
width: 120px;
height: 42px;
background: #F7F8FA;
color:#333;
border: 0 !important;
}
.el-radio-button__orig-radio:checked + .el-radio-button__inner {// 修改按钮激活样式
color: #fff;
background-color: #f63;
border-color: #f63;
Box-shadow: -1px 0 0 0 #f63;
}
}
原文地址:https://www.cnblogs.com/wqddmg/p/16832106.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。