el-radio-button自适应充满盒子的写法

业务场景:当盒子较宽时,希望 el-radio-button 自适应充满盒子。

el-radio-button 自适应充满盒子的写法

<el-form :inline="true" :model="searchForm">
        <el-form-item style="display: flex; align-items: center;">
          <el-radio-group style="flex-wrap: nowrap;" v-model="searchForm.stateType" size="default" >
            <el-radio-button label="1" class="first">当前</el-radio-button>
            <el-radio-button label="2" class="end">逾期</el-radio-button>
          </el-radio-group>
        <el-form-item>
</el-form>

:deep(.el-radio-group) {
  display: flex;
  width: 100%;
  text-align: center;
}
:deep(.el-radio-button) {
  flex: 1;
  background-color: var(--gdky-content-bg);
}
:deep(.el-radio-button.is-active) {
  background-color: var(--el-color-primary);
}

:deep(.el-radio-button:first-child) {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
:deep(.el-radio-button:last-child) {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

:deep(.el-radio-button__inner) {
  transition: none; // button宽度变宽后,过度效果明显看起有有点卡,这里去掉过渡效果
}

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Qt:自定义一个好看的等待提示Ui控件

一、2024 永不卡顿 爱的魔力它转圈圈~ 等待样式控件是我们在做UI时出场率还挺高的控件之一&#xff0c;通常情况下有如下的几种实现方式&#xff1a; 1> 获取一张gif的资源图&#xff0c;然后使用QMovie 在一个QLabel 控件上加载显示gif的waiting等待动态。 2> 自定义绘图…

怎么快速修复mfc140.dll文件?解决mfc140.dll缺失的方法

面对计算机报告的 ​mfc140.dll​ 文件遗失错误&#xff0c;这通常表明系统中缺少一个关键的动态链接库文件&#xff0c;该文件对于运行以 Microsoft Foundation Class (MFC) 库编写的程序十分重要&#xff0c;尤其是那些需要图形界面的应用程序和一些游戏。若没有这个文件&…

【数字图像处理技术与应用】2023-2024上图像处理期中-云南农业大学

一、填空题&#xff08;每空2 分&#xff0c;共 30 分&#xff09; 1、图像就是3D 场景在 二维 平面上的影像&#xff0c;根据其存储方式和表现形式&#xff0c;可以将图像分为 模拟 图像和数字图像两大类&#xff1b; 2、在用计算机对数字图像处理中&#xff0c;常用一个 二…

【userfaultfd 条件竞争】starCTF2019 - hackme

前言 呜呜呜&#xff0c;这题不难&#xff0c;但是差不多一个多月没碰我的女朋友 kernel pwn 了&#xff0c;对我的 root 宝宝也是非常想念&#xff0c;可惜这题没有找到我的 root 宝宝&#xff0c;就偷了她的 flag。 哎有点生疏了&#xff0c;这题没看出来堆溢出&#xff0c…

引导过程的解析以及教程za

bios加电自检------mbr--------grub-------加载内核文件------启动第一个进程 bios的主要作用&#xff1a;检测硬件是否正常&#xff0c;然后根据bios中的启动项设置&#xff0c;去找内核文件 boot开机启动项顺序&#xff0c;你可以把内核文件放在何处&#xff1f; 1.硬盘 …

Vue3 watch 的使用,如何监听一个对象中的属性值的变化 vue3 + ts + vite

Vue3 watch 的使用&#xff0c;如何监听一个对象中的属性值的变化 由 vue2 转到 vue3 ts vite 之后都不会写这些玩意了。搜了下&#xff0c;找到了答案&#xff1a; vue2 的 watch export default {watch: {$route.query.id(newValue){// 可以这样监听路由的变化},formUse…

CGAL的D维空间搜索(基于KD树)

1、介绍 空间搜索包通过提供支持以下算法的实现来实现精确和近似距离的实现 最近和最远邻居搜索 精确和近似搜索 &#xff08;近似&#xff09;范围搜索 &#xff08;近似&#xff09;k-最近邻和k-最远邻搜索 &#xff08;近似&#xff09;增量最近邻和增量最远邻搜索 表示点和…

SPSS23软件安装包下载及安装教程

SPSS 23下载链接&#xff1a;https://docs.qq.com/doc/DUkRHVUxFUkVBUUlj 1.选中下载好的安装包&#xff0c;鼠标右键解压到“SPSS 23 64bit”文件夹 2.打开”Setup“文件夹 3.选中”Setup.exe“鼠标右击选择以管理员身份运行 4.点击“下一步” 5.点击“下一步” 6.选择“我接受…

安全与认证Week4

目录 本章需要理解的问题 Web Security (TLS/SSL) 关于网络 使用网络会受到的威胁 各层安全协议 S/MIME、PGP&#xff08;后面和S/MIME一起出现&#xff09;、Kerberos、TLS/SSL 和 IP/IPSec 分别是&#xff1a; S/MIME (Secure/Multipurpose Internet Mail Extensions)&#x…

Redis缓存保卫战:拒绝缓存击穿的进攻【redis问题 三】

欢迎来到我的博客&#xff0c;代码的世界里&#xff0c;每一行都是一个故事 Redis缓存保卫战&#xff1a;拒绝缓存击穿的进攻 前言缓存击穿的定义和原理为何会发生缓存击穿缓存击穿的危害防范缓存击穿结语: 前言 你是否曾经遇到过系统在高并发情况下出现严重性能问题&#xff…

【计算机图形学】NAP: Neural 3D Articulation Prior

文章目录 1. 这篇论文做了什么事&#xff0c;有什么贡献&#xff1f;2. Related Work铰接物体建模3D中的Diffusion model扩散模型 3. Pipeline铰接树参数化基于Diffusion的铰接树生成去噪网络 4. 实验评价铰接物体生成——以往做法与本文提出的新指标NAP捕捉到的铰接物体分布质…

用户管理第2节课--idea 2023.2 后端--实现基本数据库操作(操作user表) -- 自动生成 --【本人】

一、插件安装 1.1 搜索插件 mybatis 安装 1.2 接受安装 1.3 再次进入&#xff0c;说明安装好了 1.4 与鱼皮不同点 1&#xff09;mybatis 版本不一致 鱼皮&#xff1a; 本人&#xff1a; 2&#xff09;鱼皮需重启安装 本人不需要 1.5 【需完成 三、步骤&#xff0c;再来看】 …

Noisy DQN 跑 CartPole-v1

gym 0.26.1 CartPole-v1 NoisyNet DQN NoisyNet 就是把原来Linear里的w/b 换成 mu sigma * epsilon, 这是一种非常简单的方法&#xff0c;但是可以显著提升DQN的表现。 和之前最原始的DQN相比就是改了两个地方&#xff0c;一个是Linear改成了NoisyLinear,另外一个是在agent在t…

车载 Android之 核心服务 - CarPropertyService 解析

重要类的源码文件名及位置&#xff1a; CarPropertyManager.java packages/services/Car/car-lib/src/android/car/hardware/property/ CarPropertyService.java packages/services/Car/service/src/com/android/car/ 类的介绍&#xff1a; CarPropertyManager&#xff1a…

基于多反应堆的高并发服务器【C/C++/Reactor】(中)在EventLoop中处理被激活的文件描述符的事件

文件描述符处理与回调函数 一、主要概念 反应堆模型&#xff1a;一种处理系统事件或网络事件的模型&#xff0c;当文件描述符被激活时&#xff0c;可以检测到文件描述符&#xff1a;在操作系统中&#xff0c;用于标识打开的文件、套接字等的一种数据类型 处理激活的文件描述符…

k8s中ConfigMap详解及应用

一、ConfigMap概述 ConfigMap是k8s的一个配置管理组件&#xff0c;可以将配置以key-value的形式传递&#xff0c;通常用来保存不需要加密的配置信息&#xff0c;加密信息则需用到Secret&#xff0c;主要用来应对以下场景&#xff1a; 使用k8s部署应用&#xff0c;当你将应用配置…

DrGraph原理示教 - OpenCV 4 功能 - 二值化

二值化&#xff0c;也就是处理结果为0或1&#xff0c;当然是针对图像的各像素而言的 1或0&#xff0c;对应于有无&#xff0c;也就是留下有用的&#xff0c;删除无用的&#xff0c;有用的部分&#xff0c;就是关心的部分 在图像处理中&#xff0c;也不仅仅只是1或0&#xff0c;…

docker安装postgresql15或者PG15

1. 查询版本 docker search postgresql docker pull postgres:15.3 # 也可以拉取其他版本2.运行容器并挂载数据卷 mkdir -p /data/postgresql docker run --name postgres \--restartalways \-e POSTGRES_PASSWORDpostgresql \-p 5433:5432 \-v /data/postgresql:/var/lib/p…

工业制造领域,折弯工艺如何进行优化?

若将消费互联网与工业互联网相比较&#xff0c;消费互联网就好似一片宽度为1000米、深度仅有1米的水域&#xff0c;而工业互联网则类似于宽度有1000米、深达10000米的海域。消费互联网因为被限制了深度&#xff0c;便只能在浅显的焦虑中创造出一种消费趋势。相较之下&#xff0…

数据库迁移工具包:DBSofts ESF Database Migration Crack

ESF 数据库迁移工具包 - 11.2.17 允许您通过 3 个步骤在各种数据库格式之间迁移数据&#xff0c;无需任何脚本&#xff01; DBSofts ESF Database Migration它极大地减少了与以下任何数据库格式之间迁移的工作量、成本和风险&#xff1a;Oracle、MySQL、MariaDB、SQL Server、…
最新文章