Element UI教程:如何将Radio单选框的圆框改为方框

news2024/11/6 3:10:50

大家好,今天给大家带来一篇关于Element UI的使用技巧。在项目中,我们经常会用到Radio单选框组件,默认情况下,Radio单选框的样式是圆框。但有时候,为了满足设计需求,我们需要将圆框改为方框,如下图。下面我将详细介绍如何实现这一功能。 

一、基本用法 

首先,我们来看一下Radio单选框的基本用法:

<template>
  <el-radio v-model="radio" label="1">男</el-radio>
  <el-radio v-model="radio" label="2">女</el-radio>
</template>

<script>
export default {
  data() {
    return {
      radio: '1'
    };
  }
}
</script>

二、将圆框改为方框

这里主要用到的是CSS样式覆盖。

1、首先,为Radio组件添加一个自定义类名,如下:

<el-radio v-model="radio" label="1" class="square-radio">男</el-radio>
<el-radio v-model="radio" label="2" class="square-radio">女</el-radio>

2、然后,在样式中添加以下CSS代码:

.square-radio .el-radio__inner {
  border-radius: 0; /* 将圆角设置为0,实现方框效果 */
}

.square-radio .el-radio__inner:after {
    box-sizing: content-box;
    content: "";
    border: 1px solid #fff;
    border-left: 0;
    border-top: 0;
    height: 7px;
    left: 4px;
    position: absolute;
    top: 1px;
    transform: rotate(45deg) scaleY(1);
    width: 3px;
    transition: transform .15s ease-in .05s;
    transform-origin: center;
}

如果不生效可以增加权重,添加!important即可 

三、总结

通过本文,我们学会了如何将Element UI中的Radio单选框的圆框改为方框。并将选中原点改为对勾。其实,实现这个功能非常简单,只需通过CSS样式覆盖即可。希望这篇文章能对您有所帮助,如果您有其他问题,欢迎在评论区留言讨论。

 

 

 

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2181110.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

如何通过开源工具帮助保护您的计算机安全

引言 如果您正在考虑安全问题&#xff0c;您有很多选择。随着当前网络犯罪的激增&#xff0c;以及发生犯罪时常见的重大后果&#xff0c;许多企业开始关注如何在网络世界中保护公民的安全。网络安全行业蕴藏着巨大的商业利益&#xff0c;但您可能会惊讶地发现&#xff0c;有一…

前端工程规范-5:Git提交信息规范(commitlint + czg)

前面讲的都是在git提交之前的一些检查流程&#xff0c;然而我们git提交信息的时候&#xff0c;也应该是需要规范的。直接进入主题&#xff1a; 目录 需安装插件清单commitlint 介绍安装配置配置commit-msg钩子提交填写commit信息czg后续方式一&#xff1a;push触动build并上传…

记一次vue-cli老项目的打包时长优化

记一次vue-cli老项目的打包时长优化 背景 这是一个基于 vue-cli 的 vue2 的老项目&#xff0c;比较久远&#xff0c;一般Jenkins中打包时间都在 5-6min 左右&#xff0c;基本能够接受。 近来由于项目原因&#xff0c;在该项目中加入了一些在打包时动态生成的js文件以做“缓存…

【SQL】笛卡尔积比较收入更高的员工

目录 语法 需求 示例 分析 代码 语法 FROM Employee a, Employee b 两个表之间笛卡尔积&#xff08;Cartesian product&#xff09;的形式&#xff0c;用了逗号分隔的连接&#xff08;comma-separated join&#xff09;&#xff0c;这是早期SQL语法中用于连接表的一种方式…

从零开始学习OMNeT++系列第二弹——新建一个OMNeT++的工程

上一篇第一弹介绍了OMNeT是什么以及如何安装OMNeT&#xff0c;现在来说一下如何新建一个自己的OMNeT的工程。 在 Omnet安装完成后&#xff0c;samples/tictoc 中有该例子的完整文件&#xff0c;你可以立刻运行该文件看他是怎么工作的&#xff0c;不过更推荐按接下来的步骤一步…

[Notepad++] 文本编辑器的下载及详细安装使用过程(附有下载文件)

程序员常用的文本编辑器Notepad&#xff0c;用于修改配置文件等 下载链接在文末 下载压缩包后解压 &#xff01;&#xff01;安装路径不要有中文 解压文件&#xff0c;得到 双击exe文件 选择简体中文&#xff0c;点击OK 点击下一步 点击“我接受” 更改安装目录&#xff0c;不…

谷歌收录查询工具,如何选择适合自己的谷歌收录查询工具

搜索引擎优化&#xff08;SEO&#xff09;的实践中&#xff0c;了解网站在谷歌搜索引擎中的收录情况是一项至关重要的任务。这不仅能反映网站在谷歌搜索结果中的可见性&#xff0c;还能帮助SEO专业人士和网站所有者识别潜在的优化机会。 一、谷歌收录查询工具 1.GoogleSear…

通信工程学习:什么是CSMA/CA载波监听多路访问/冲突避免

CSMA/CA&#xff1a;载波监听多路访问/冲突避免 CSMA/CA&#xff08;Carrier Sense Multiple Access/Collision Avoidance&#xff09;&#xff0c;即载波监听多路访问/冲突避免&#xff0c;是一种用于数据传输时避免各站点之间冲突的算法&#xff0c;尤其适用于无线局域网&…

基于springboot的评分评教管理系统

&#x1f449;文末查看项目功能视频演示获取源码sql脚本视频导入教程视频 1 、功能描述 基于springboot的评分评教管理系统1拥有三种角色 管理员&#xff1a;评价管理、学生管理、评分指标管理、课程管理、教师管理、管理员管理等教师&#xff1a;课程管理、学生管理、个人信…

ubuntu server 常用配置

这里写目录标题 0001 虚拟机静态IP0002 vim tab 4个空格0003 设置时区0004 网络端口查看端口开放端口 0005 修噶机主机名 0001 虚拟机静态IP win网络链接&#xff0c;IP地址&#xff1a;192.168.220.1 - NAT网关&#xff1a;192.168.220.2 - ubuntu静态IP设置&#xff1a; ca…

24年九月份生活随笔

九月份最后一天&#xff0c;烈士纪念日。 上午看了一会儿直播&#xff0c;庄重的仪式&#xff0c;铭记先辈为新中国抛头颅洒热血&#xff0c;当今盛世&#xff0c;如您所愿。 郑州马拉松官方通告&#xff0c;今天十点公布直通&#xff0c;中签&#xff0c;候补结果。 看完直…

算法:153.寻找旋转排序数组中的最小值

题目 链接&#xff1a;leetcode链接 思路分析&#xff08;二分&#xff09; 题目要求O(logN)的时间复杂度&#xff0c;那就必然是使用二分算法了。 怎么个二分呢&#xff1f; 首先&#xff0c;我们来寻找二段性 我们看示例一&#xff1a; 3&#xff0c;4&#xff0c;5&…

LeetCode 面试经典150题 172.阶乘后的零

题目&#xff1a;给定一个整数 n &#xff0c;返回 n! 结果中尾随零的数量。 提示 n! n * (n - 1) * (n - 2) * ... * 3 * 2 * 1 思路&#xff1a; 代码&#xff1a; class Solution {public int trailingZeroes(int n) {return n 0 ? 0 : n / 5 trailingZeroes(n / 5);}…

Android-由switch-case和view.getId()引起的bug:错误:需要常量表达式 的解决办法

无意中&#xff0c;使用按钮测试点击事件&#xff0c;在此过程中使用了switch case语句&#xff0c;在条件switch中使用了view.getId()&#xff0c;出现错误。我记得很早之前写Android程序没啥问题&#xff0c;于是研究了一番。 度娘一番才知道&#xff0c;是因为R文件的缘故。…

【视频目标分割-2024CVPR】Putting the Object Back into Video Object Segmentation

Cutie 系列文章目录1 摘要2 引言2.1背景和难点2.2 解决方案2.3 成果 3 相关方法3.1 基于记忆的VOS3.2对象级推理3.3 自动视频分割 4 工作方法4.1 overview4.2 对象变换器4.2.1 overview4.2.2 Foreground-Background Masked Attention4.2.3 Positional Embeddings 4.3 Object Me…

git eslint扩展,解决git提交因为空格差异而报错

项目场景&#xff1a; 在前端项目开发中&#xff0c;经常会使用eslint,这个方法的好处就是严格要求代码格式。让代码更为严谨。 问题描述 以为eslint格式过于严谨&#xff0c;在git提交的时候&#xff0c;经常会因为一个多了一个空格导致代码提交失败。 原因分析&#xff1a;…

【C++打怪之路Lv4】-- 类和对象(中)

&#x1f308; 个人主页&#xff1a;白子寰 &#x1f525; 分类专栏&#xff1a;C打怪之路&#xff0c;python从入门到精通&#xff0c;数据结构&#xff0c;C语言&#xff0c;C语言题集&#x1f448; 希望得到您的订阅和支持~ &#x1f4a1; 坚持创作博文(平均质量分82)&#…

C语言第三周课

目录 一、C语言中基本语句的分类&#xff1a; 二、数据的输入和输出 1.putchar函数 2.getchar函数 3.printf函数 printf() 的正常输出格式&#xff1a; 输出控制符大全 4.scanf函数 三、顺序结构 四、选择结构 1.if 2.switch 五、循环结构 1.for循环 2.while循环 3.…

【读书笔记-《网络是怎样连接的》- 1】Chapter1-从Web浏览器开始

网络之旅的第一章&#xff0c;我们从在浏览器中输入url开始。本章主要介绍三部分内容。首先是在Web浏览器中输入URL后&#xff0c;浏览器是如何解析URL并生成HTTP请求消息的。生成请求消息后&#xff0c;浏览器需要将请求发送给Web服务器&#xff0c;需要知道Web服务器的IP地址…

2024年必考这个人工智能AI大模型证书!

2024必考这个人工智能AI大模型证书&#xff1a;名额有限&#xff0c;报满截止&#xff01; Chat GPT 的发布&#xff0c;让大语言模型成了人工智能的焦点。尤其近期发布的大模型各业务场景应用应接不暇&#xff0c;为行业带来新的发展机遇&#xff0c;甚至将重构AI行业。AI行业…