vue3 antdv Modal通过设置内容里的容器的最小高度,让Modal能够适当的变高一些

news2025/1/8 5:38:47

1、当收款信息Collapse也折叠的时候,我们会发现Modal的高度也变成了很小。

2、我们希望高度稍微要高一些,这样感觉上面显示的Modal高度太小了,显示下面的效果。

3、初始的时候,想通过class或者style或者wrapClassName来实现,发现不起作用Ant Design Vue — An enterprise-class UI components based on Ant Design and Vue.js

4、感觉这个Modal是根据内容的高度来自动缩放的,那我们在可以在内容容器设置min-height就可以。

<Collapse v-model:activeKey="activeKey" expandIconPosition="right" accordion style="min-height: 500px;">
        <CollapsePanel key="1" header="基础信息">
         <div>
         </div>
        </CollapsePanel>
        <CollapsePanel key="1" header="收款信息">
         <div>
         </div>
        </CollapsePanel>
</Collapse>
import { Collapse } from 'ant-design-vue';
const CollapsePanel = Collapse.Panel;

这样就可以了。在Collapse上面设置一下min-height。

当然方法应该有多种,可以自己尝试下,如果有时间。

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

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

相关文章

理解局域网技术:从基础到进阶

局域网&#xff08;LAN&#xff09;是在20世纪70年代末发展起来的&#xff0c;起初主要用于连接单位内部的计算机&#xff0c;使它们能够方便地共享各种硬件、软件和数据资源。局域网的主要特点是网络为一个单位所拥有&#xff0c;地理范围和站点数目均有限。 局域网技术在计算…

【排序算法】快速排序(详解+各版本实现)

目录 一.交换排序 1.基本思想 2.冒泡排序 二.快速排序 1.hoare版本 2.挖坑法 3.前后指针版本 4.优化 优化①&#xff1a;三数取中 优化②&#xff1a;小区间优化 5.非递归版本 6.特性总结 ①效率 ②时间复杂度&#xff1a;O(N*logN) ③空间复杂度&#xff1a;O(l…

拓展神经网络八股(入门级)

自制数据集 minst等数据集是别人打包好的&#xff0c;如果是本领域的数据集。自制数据集。 替换 把图片路径和标签文件输入到函数里&#xff0c;并返回输入特征和标签 只需要把图片灰度值数据拼接到特征列表&#xff0c;标签添加到标签列表,提取操作函数如下&#xff1a; def…

STM32快速搭建项目框架

注&#xff1a;编写本博客的原因&#xff0c;学习期间基于复习之前知识点的需要&#xff0c;故撰写本教程&#xff0c;即是复习前面的知识点也是作为博客的补充 1.0 文件夹的创建 创建一个STM32项目为模版工程&#xff0c;问价夹下分别包含4个子文件夹&#xff0c;一个是Librar…

【初阶数据结构】1.算法复杂度

文章目录 1.数据结构前言1.1 数据结构1.2 算法1.3 如何学好数据结构和算法 2.算法效率2.1 复杂度的概念2.2 复杂度的重要性 3.时间复杂度3.1 大O的渐进表示法3.2 时间复杂度计算示例3.2.1 示例13.2.2 示例23.2.3 示例33.2.4 示例43.2.5 示例53.2.6 示例63.2.7 示例7 4.空间复杂…

阻尼振动的可视化 包括源码和推导

阻尼振动的可视化 包括源码和推导 flyfish 牛顿第二定律&#xff08;加速度定律&#xff09; 胡克定律&#xff08;Hooke‘s Law&#xff09; 阻尼振动是指在振动系统中&#xff0c;由于阻力或能量损耗导致振动幅度随时间减小的现象。 左边为无阻尼&#xff0c;右边为有阻尼…

【WEB前端2024】3D智体编程:乔布斯3D纪念馆-第57-agent机器人助理自动获取喵星人资讯

【WEB前端2024】3D智体编程&#xff1a;乔布斯3D纪念馆-第57-agent机器人助理自动获取喵星人资讯 使用dtns.network德塔世界&#xff08;开源的智体世界引擎&#xff09;&#xff0c;策划和设计《乔布斯超大型的开源3D纪念馆》的系列教程。dtns.network是一款主要由JavaScript…

FastReport 指定sql 和修改 数据库连接地址的 工具类 :FastReportHelper

FastReport 指定sql 和修改 数据库连接地址的 工具类 &#xff1a;FastReportHelper 介绍核心代码&#xff1a;完整代码&#xff1a; 介绍 在FastReport中&#xff0c;经常会遇到需要给 sql 加条件的情况&#xff0c;或者给数据库地址做更换。 &#xff08;废话不多说&#x…

Elasticsearch基础(四):Elasticsearch语法与案例介绍

文章目录 Elasticsearch语法与案例介绍 一、Restful API 二、查询语法 1、ES分词器 2、ES查询 2.1、match 2.2、match_phrase 2.3、multi_match 2.4、term 2.5、terms 2.6、fuzzy 2.7、range 2.8、bool Elasticsearch语法与案例介绍 一、Restful API Elastics…

Echarts实现github提交记录图

最近改个人博客&#xff0c;看了github的提交记录&#xff0c;是真觉得好看。可以移植到自己的博客上做文章统计 效果如下 代码如下 <!DOCTYPE html> <html lang"en" style"height: 100%"><head><meta charset"utf-8"> …

需求分析|泳道图 ProcessOn教学

文章目录 1.为什么使用泳道图2.具体例子一、如何绘制确定好泳道中枢的角色在中央基于事实来绘制过程不要纠结美观先画主干处理流程再画分支处理流程一个图表达不完&#xff0c;切分子流程过程数不超25 &#xff0c;A4纸的幅面处理过程过程用动词短语最后美化并加上序号酌情加上…

未羽研发测试管理平台

突然有一些觉悟&#xff0c;程序猿不能只会吭哧吭哧的低头做事&#xff0c;应该学会怎么去展示自己&#xff0c;怎么去宣传自己&#xff0c;怎么把自己想做的事表述清楚。 于是&#xff0c;这两天一直在整理自己的作品&#xff0c;也为接下来的找工作多做点准备。接下来…

2-29 基于matlab的CEEMD

基于matlab的CEEMD&#xff08;Complementary Ensemble Empirical Mode Decomposition&#xff0c;互补集合经验模态分解&#xff09;&#xff0c;先将数据精心ceemd分解&#xff0c;得到imf分量&#xff0c;然后通过相关系数帅选分量&#xff0c;在求出他们的样本熵的特征。用…

理解点对点协议:构建高效网络通信

在通信线路质量较差的年代&#xff0c;能够实现可靠传输的高级数据链路控制&#xff08;High-level Data Link Control, HDLC&#xff09;协议曾是比较流行的数据链路层协议。HDLC是一个较复杂的协议&#xff0c;实现了滑动窗口协议&#xff0c;并支持点对点和点对多点两种连接…

SpringBoot实现简单AI问答(百度千帆)

第一步&#xff1a;注册并登录百度智能云&#xff0c;创建应用并获取自己的APIKey与SecretKey&#xff0c;参考网址&#xff1a; 点击去百度智能云 第二步&#xff1a;引入千帆的pom依赖 <dependency><groupId>com.baidubce</groupId><artifactId>q…

我的FPGA

1.安装quartus 2.更新usb blaster驱动 3.新建工程 1.随便找一个文件夹&#xff0c;里面新建demo文件夹&#xff0c;表示一个个工程 在demo文件夹里面&#xff0c;新建src&#xff08;源码&#xff09;&#xff0c;prj&#xff08;项目&#xff09;&#xff0c;doc&#xff…

基于单片机的温控光控智能窗帘设计探讨

摘 要&#xff1a; 文章使用的核心原件是 AT89C52 单片机&#xff0c;以此为基础进行模块化的设计&#xff0c;在整个设计中通过加入光检测模块和温度检测模块&#xff0c;从而对室内的温度和光照强度进行检测&#xff0c;然后将检测得到的数据传输给单片机&#xff0c;单片机…

Mosh|内连接、外连接、左连接、右连接(未完)

下图取自菜鸟教程&#xff0c;侵权删&#xff5e; 一、内连接&#xff1a;Inner Joins 模版&#xff1a;SELECT * FROM A JOIN B ON 条件 含义&#xff1a;返回A与B的交集&#xff0c;列为AB列之和 练习&#xff1a;将order_items表和products表连接&#xff0c;返回产品id和…

成为编程大佬!!——数据结构与算法(1)——算法复杂度!!

前言&#xff1a;解决同一个程序问题可以通过多个算法解决&#xff0c;那么要怎样判断一个算法的优劣呢&#xff1f;&#x1f914; 算法复杂度 算法复杂度是对某个程序运行时的时空效率的粗略估算&#xff0c;常用来判断一个算法的好坏。 我们通过两个维度来看算法复杂度——…

记录docker部署好golang web项目后浏览器访问不到的问题

部署好项目&#xff0c;docker ps -a查看没有任何问题 端口映射成功&#xff0c;但是浏览器就是访问不到&#xff0c;排查后发现犯了个错&#xff0c;注意&#xff0c;项目配置文件中的端口&#xff1a; 其实也就是你项目中监听的端口&#xff1a; 必须和容器端口一致&#x…