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: #032E74;
}
: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.mzph.cn/news/593167.shtml

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

相关文章

【Java EE初阶七】多线程案例(阻塞队列与生产者消费者模型)

1. 阻塞队列 队列是先进先出的一种数据结构&#xff1b; 阻塞队列&#xff0c;是基于队列&#xff0c;做了一些扩展&#xff0c;适用于多线程编程中&#xff1b; 阻塞队列特点如下&#xff1a; 1、是线程安全的 2、具有阻塞的特性 2.1、当队列满了时&#xff0c;就不能往队列里…

串口通信要点解析

目录 简介&#xff1a; UART 协议解析&#xff1a; 串口协议工作过程&#xff1a; 简介&#xff1a; 串行通信协议包括&#xff1a; UART通用异步收发传输器 (Universal Asynchronous ReceiverTransmitter) 是一种串行异步收发协议 (异步是指通信双方使用各自的时钟控制数据…

fineBI web组件传参

1、fineBI web组件传参 1.1、 Web组件- FineBI帮助文档 FineBI帮助文档1. 概述1.1 版本FineBI 版本HTML5移动端展现功能变动6.0--V11.0.83web组件适配移动端效果优化6.0.13-web组件支持传递参数 ${过滤组件https://help.fanruan.com/finebi/doc-view-143.html 1.2、自己做的例…

分布式(6)

目录 26.雪花算法如何实现的&#xff1f; 27.雪花算法有什么问题&#xff1f;有哪些解决思路&#xff1f; 28.有哪些方案实现分布式锁&#xff1f; 29.基于数据库如何实现分布式锁&#xff1f;有什么缺陷&#xff1f; 30.基于Redis如何实现分布式锁&#xff1f;有什么缺陷&…

VS 2022 控制台程序运行时不显示控制台

Visual Studio 2022&#xff0c;C#控制台程序运行时不显示控制台。此外&#xff0c;C#程序修改运行时的程序名。 文章目录 不显示控制台修改运行时的程序名打包成.exe 文件 不显示控制台 1 选中需要项目&#xff0c;右击属性&#xff0c;选中常规。 2 将输出类型从控制台改为…

微服务-@FeignClient 与 Feign 隔离

FeignClient 扫描 FeignClientsRegistrar#registerBeanDefinitions public void registerBeanDefinitions(AnnotationMetadata metadata,BeanDefinitionRegistry registry) { // 注册默认配置 registerDefaultConfiguration(metadata, registry); registerFeignClients(metada…

服务异步通讯---RabbitMQ实用篇

目录 一、初识MQ 一、同步调用 1、同步通讯和异步通讯 2、同步调用的问题 3.同步调用总结 二、异步调用 1、优势&#xff1a; ​编辑 2、异步总结 二、什么是MQ 一、RabbitMQ快速入门 1、RabbitMQ的结构和概念 2、常见消息模型 2.1、基础消息队列模型 2.2、总结 二…

Sharding-JDBC快速使用【笔记】

1 引言 最近在使用Sharding-JDBC实现项目中数据分片、读写分离需求&#xff0c;参考官方文档&#xff08;Sharding官方文档&#xff09;感觉内容庞杂不够有条理&#xff0c;重复内容比较多&#xff1b;现结合项目应用整理笔记如下供大家参考和自己回忆使用&#xff1b; 在…

为什么要太空探索?未来万亿人口 人类移居太空是不可避免的。大语言模型是发现 贝索斯

管理的思考 「最以客户为中心」「果断」「如何决策」 贝索斯给亚马逊的使命是「世上最以客户为中心的公司」(以客户需求为起点&#xff0c;反向推动工作)。贝索斯给蓝色起源的使命是「世上最果断的公司」(我们将变得非常擅长在技术上恰当地冒险&#xff0c;并快速地作出那些决…

一篇了解springboot3请求参数种类及接口测试

SpringBoot3数据请求&#xff1a; 原始数据请求&#xff1a; //原始方式RequestMapping("/simpleParam")public String simpleParam(HttpServletRequest request){//获取请求参数String name request.getParameter("name");String age request.getParame…

钉钉-蓝牙打卡和平台打卡的区别

钉钉的群是部门概念。 你的账号归属到哪个群&#xff0c;就是哪个群的员工。 -------------------------------------------------------------------- 蓝牙打卡是对账号归属进行打卡的。 平台打卡是只对属于自己平台内的账号打卡的。 ----------------------------------…

【MATLAB】PSO粒子群优化BiLSTM(PSO_BiLSTM)的时间序列预测

有意向获取代码&#xff0c;请转文末观看代码获取方式~也可转原文链接获取~ 1 基本定义 基于PSO粒子群优化的BiLSTM的时间序列预测算法的基本原理如下&#xff1a; 「双向长短时记忆&#xff08;BiLSTM&#xff09;模型」&#xff1a;这是一种深度学习模型&#xff0c;特别适用…

感恩客户相伴23载,泛微2024持续向上!

2023年&#xff0c;国家大力推动数字经济发展&#xff0c;各行各业在加速数字化转型&#xff0c;在这一年&#xff0c;泛微保持持续增长&#xff0c;引领行业发展&#xff0c;为组织的数字化转型助力。感恩客户与伙伴朋友的支持与信任&#xff01; 01.泛微中大客户总量突破8万余…

Unity中Shader的Reversed-Z(DirectX平台)

文章目录 前言一、在对裁剪坐标归一化设置NDC时&#xff0c;DirectX平台Z的特殊二、在图形计算器中&#xff0c;看一下Z值反转前后变化1、在图形计算器创建两个变量 n 和 f 分别 控制近裁剪面 和 远裁剪面2、带入公式得到齐次裁剪空间下Z值3、进行透视除法4、用 1 - Z 得出Z值反…

VS+QT五子棋游戏开发

1、首先安装好VS软件和QT库&#xff0c;将其配置好&#xff0c;具体不在此展开说明。 2、文件结构如下图&#xff1a; 3、绘制棋盘代码&#xff0c;如下&#xff1a; void Qwzq::paintEvent(QPaintEvent* event) {QPainter painter(this);painter.setRenderHint(QPainter::An…

【响应式编程-01】Lambda表达式初体验

一、简要描述 Lambda初体验Lambda表达式的语法格式Lambda表达式应用举例Lambda表达式底层实现 二、什么是Lambda表达式 Java8新特性&#xff0c;来源于数学中的λ[l:mdə]演算 是一套关于函数(f(x))定义、输入量、输出量的计算方案 Lambda表达式 -> 函数 使代码变得简洁…

维生素B5和琥珀酰辅酶A可以改善SF3B1基因突变引起无效造血过程

今天给同学们分享一篇实验文章“Vitamin B5 and succinyl-CoA improve ineffective erythropoiesis in SF3B1-mutated myelodysplasia”&#xff0c;这篇文章发表在Sci Transl Med期刊上&#xff0c;影响因子为17.1。 结果解读&#xff1a; SF3B1突变导致MDS-RS患者COASY异构体…

短视频账号矩阵系统源码/技术交付3年开发源头

账号矩阵3年技术独立开发打造是一个非常有挑战性和前景的项目。以下是一些建议&#xff0c;帮助你成功打造一个成功的短视频账号矩阵&#xff1a; 1. 确定目标受众&#xff1a;首先需要明确你的目标受众是谁&#xff0c;了解他们的兴趣爱好、年龄、性别等&#xff0c;以便为他们…

八大算法排序@选择排序(C语言版本)

目录 选择排序概念算法思想示例步骤1步骤2步骤...n最后一步 代码实现时间复杂度空间复杂度特性总结 选择排序 概念 选择排序&#xff08;Selection Sort&#xff09;是一种简单直观的排序算法。基本思想是在未排序的序列中找到最小&#xff08;或最大&#xff09;元素&#xf…

RS485数据采集模块,如何一次采集多个modbus设备数据?

在工业数据采集中&#xff0c;RS485是一种常见的数据通信协议&#xff0c;而Modbus则是其上的常用设备协议。那么&#xff0c;如何用一个模块高效采集多个Modbus设备的数据呢&#xff1f;这就是我们今天要探讨的话题&#xff01; 什么是RS485数据采集模块&#xff1f; 首先&a…