vue2 自定义 el-radio-button 的样式并设置默认值的方法

编辑：rootadmin

这篇文章主要介绍了vue2 自定义 el-radio-button 的样式并设置默认值的操作方法，代码分为html部分和css修改样式代码，代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

推荐整理分享vue2 自定义 el-radio-button 的样式并设置默认值的方法，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:,内容如对您有帮助，希望把文章链接给更多的朋友！

效果

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

本文链接地址:https://www.jiuchutong.com/zhishi/304744.html 转载请保留说明！

上一篇：phpcms缓存文件在哪里(phpweb缓存技术)

下一篇：vue如何处理防止按钮重复点击问题(vue加载时如何避免出现代码)