如何设置Vue2自定义el-radio-button默认值及长尾词样式？

本文共计413个文字，预计阅读时间需要2分钟。

效果：使用HTML和Vue的el-radio-group与v-model实现单选按钮组，设置三个选项：指定、认领、自愿。

代码示例： 指定 认领 自愿

CSS样式修改： :deep(.el-radio-group) { /* 修改radio-group的样式 */ }

效果

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样式,内容请搜索自由互联以前的文章或继续浏览下面的相关文章希望大家以后多多支持自由互联！