vue2 自定义 el-radio-button 的样式并设置默认值的方法
张铄洋 人气:0效果
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; } }
加载全部内容