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,一经查实,立即删除!

相关文章

python moviepy 图文批量合成带字幕口播视频

最近在研究将图片和文本批量合成为带字幕口播视频 主要是基于python的moviepy库 from generator import audio, pics, subs, videodef main():texts_input examplepics_input example# 图片分辨率预处理pics.adjust(pics_input)# 文字转语音audio.text_to_audio(texts_inpu…

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

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

算法分析与设计 第七次理论作业

算法分析与设计 第七次理论作业 文章目录 算法分析与设计 第七次理论作业一. 单选题&#xff08;共2题&#xff0c;20分&#xff09;二. 填空题&#xff08;共8题&#xff0c;80分&#xff09; 一. 单选题&#xff08;共2题&#xff0c;20分&#xff09; (单选题) 回溯法在搜索…

串口通信要点解析

目录 简介&#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、自己做的例…

异常、反射、注解面试题

1. throw 和 throws 的区别&#xff1f; 参考答案 位置不同1. throws 用在函数上&#xff0c;后面跟的是异常类&#xff0c;可以跟多个&#xff1b;而 throw 用在函数内&#xff0c;后面跟的是异常对象。 功能不同&#xff1a;1. throws 用来声明异常&#xff0c;让调用者只知…

分布式(6)

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

Linux---all

Linux常用命令&#xff1a; Linux常用命令-CSDN博客 Linux命令大全(超详细版)_linux命令行大全-CSDN博客Linux常用命令大全&#xff08;非常全面&#xff09;-CSDN博客Linux 命令大全&#xff08;看这一篇就足够&#xff09;_linux命令-CSDN博客Linux常用命令大全——赶紧收藏…

如何开发属于自己的小程序?

随着移动互联网的快速发展&#xff0c;小程序已成为一种不可忽视的力量。对于许多企业和个人而言&#xff0c;拥有一个属于自己的小程序不仅能提高品牌曝光度&#xff0c;还能带来实实在在的收益。那么&#xff0c;如何开发属于自己的小程序呢&#xff1f;本文将为你揭秘这一过…

ACWing--寒假每日一题代码笔记(1.1)

4993. FEB--&#xff08;python) 4993. FEB - AcWing题库 n int(input()) # print(n) slist(input()) # print(n) # 情况一&#xff1a; # xxxxxx# 合并两个公差为2的等差数列 公差仍为 2 # 合并公差分别为1和2 的等差数列 公差为1 if (s.count(F)n):print(n)for i in range…

Unity 打包前,通过代码对 AndroidManifest 增删改查

为了实现不同Android渠道&#xff0c;采用不同的 AndroidManifest 配置。 需要在Unity打包前&#xff0c;通过代码自动修改 AndroidManifest.xml 文件的内容&#xff0c;实现自动化一键生成&#xff0c;减少了生成 android studio 工程后再修改的麻烦。 首先&#xff0c;Unit…

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;并快速地作出那些决…

性能检测自动化(含内存泄露检测)

一、平台侧实现方案 1、UI case重复执行N次:进入页面,sleep 5s,记录start_time,sleep 30s,记录end_time,性能采集工具全程采集性能数据 2、根据采集到的性能数据,按照N次卡点性能数据:去掉最大的10%、最小的10%,求取平均值,作为单次性能数据结果f(n)…

基于springboot的校园社团信息管理系统

文章目录 项目介绍主要功能截图:部分代码展示设计总结项目获取方式🍅 作者主页:超级无敌暴龙战士塔塔开 🍅 简介:Java领域优质创作者🏆、 简历模板、学习资料、面试题库【关注我,都给你】 🍅文末获取源码联系🍅 项目介绍 基于springboot的校园社团信息管理系统,…

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

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

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

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