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功能

    本文是 Flutter 部件内部状态管理的小结,从部件的基础开始,到部件的状态管理,并且在过程中实现一个类似 Vue 的 v-model 的功能,感兴趣的朋友跟随小编一起看看吧
    2019-06-06
  • Vue实现远程获取路由与页面刷新导致404错误的解决

    Vue实现远程获取路由与页面刷新导致404错误的解决

    这篇文章主要介绍了Vue实现远程获取路由与页面刷新导致404错误的解决,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-01-01
  • element-plus报错ResizeObserver loop limit exceeded解决办法

    element-plus报错ResizeObserver loop limit exceeded解决办法

    这篇文章主要给大家介绍了关于element-plus报错ResizeObserver loop limit exceeded的解决办法,文中通过代码介绍的非常详细,对大家的学习或者工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-07-07
  • 利用vue+elementUI实现部分引入组件的方法详解

    利用vue+elementUI实现部分引入组件的方法详解

    这篇文章主要给大家介绍了关于利用vue+elementUI实现部分引入组件的相关资料,以及介绍了vue引入elementUI报错的解决方法,文中通过示例代码介绍的非常详细,需要的朋友可以参考借鉴,下面随着小编来一起学习学习吧。
    2017-11-11
  • VUE 项目如何使用 Docker+Nginx进行打包部署

    VUE 项目如何使用 Docker+Nginx进行打包部署

    使用 Docker,你可以创建一个包含 Vue.js 应用程序的容器镜像,并在任何支持 Docker 的环境中运行该镜像,这篇文章主要介绍了VUE 项目用 Docker+Nginx进行打包部署,需要的朋友可以参考下
    2024-06-06
  • Create vite理解Vite项目创建流程及代码实现

    Create vite理解Vite项目创建流程及代码实现

    这篇文章主要为大家介绍了Create vite理解Vite项目创建流程及代码实现,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-10-10
  • Vue双向绑定详解

    Vue双向绑定详解

    这篇文章主要介绍了Vue 实现双向绑定的四种方法,非常不错,具有参考借鉴价值,需要的朋友参考下吧,希望能够给你带来帮助
    2021-11-11
  • axios进阶实践之利用最优雅的方式写ajax请求

    axios进阶实践之利用最优雅的方式写ajax请求

    之前给大家介绍了jQuery利用最优雅的方式写ajax请求的相关内容,这篇文章主要给大家介绍了关于axios进阶实践之利用最优雅的方式写ajax请求的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面来一起看看吧。
    2017-12-12
  • vue3+echarts实现渐变色环形图过程

    vue3+echarts实现渐变色环形图过程

    这篇文章主要介绍了vue3+echarts实现渐变色环形图过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-08-08
  • Vue.js框架路由使用方法实例详解

    Vue.js框架路由使用方法实例详解

    这篇文章主要介绍了Vue.js框架路由使用方法实例详解的相关资料,这里提供实例帮助大家学习理解这部分内容,需要的朋友可以参考下
    2017-08-08

最新评论