vue2 自定义 el-radio-button 的样式并设置默认值的方法
更新时间:2022年10月27日 14:38:44 作者:张铄洋
这篇文章主要介绍了vue2 自定义 el-radio-button 的样式并设置默认值的操作方法,代码分为html部分和css修改样式代码,代码简单易懂,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
效果

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;
}
}到此这篇关于vue2 自定义 el-radio-button 的样式, 并设置默认值的文章就介绍到这了,更多相关vue2自定义 el-radio-button样式,内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
Flutter部件内部状态管理小结之实现Vue的v-model功能
本文是 Flutter 部件内部状态管理的小结,从部件的基础开始,到部件的状态管理,并且在过程中实现一个类似 Vue 的 v-model 的功能,感兴趣的朋友跟随小编一起看看吧2019-06-06
element-plus报错ResizeObserver loop limit exceeded解决办法
这篇文章主要给大家介绍了关于element-plus报错ResizeObserver loop limit exceeded的解决办法,文中通过代码介绍的非常详细,对大家的学习或者工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-07-07


最新评论