当前位置:网站首页>antd组件中a-modal设置固定高度,内容滚动显示
antd组件中a-modal设置固定高度,内容滚动显示
2022-08-10 14:08:00 【JackieDYH】
当弹框内容过多时,会导致页面滚动显示数据,这个时候就需要处理一下这个弹窗的默认高度,让其出行滚动条进行显示多余数据内容
效果

代码-官方组件库说明
<!-- 预览弹窗 -->
<a-modal
v-model="visible"
footer
width="50%"
title="检查报告"
@ok="handleOk"
@cancel="handleOk"
:destroyOnClose="true"
>
<div>
<p>123456</p>
<p>123456</p>
<p>123456</p>
<p>123456</p>
<p>123456</p>
<p>123456</p>
<p>123456</p>
<p>123456</p>
<p>123456</p>
<p>123456</p>
<p>123456</p>
<p>123456</p>
<p>123456</p>
<p>123456</p>
<p>123456</p>
<p>123456</p>
<p>123456</p>
<p>123456</p>
<p>123456</p>
<p>123456</p>
<p>123456</p>
<p>123456</p>
<p>123456</p>
<p>123456</p>
<p>123456</p>
<p>123456</p>
<p>123456</p>
<p>123456</p>
<p>123456</p>
<p>123456</p>
<p>123456</p>
<p>123456</p>
<p>123456</p>
<p>123456</p>
<p>123456</p>
<p>123456</p>
<p>123456</p>
<p>123456</p>
<p>123456</p>
<p>123456</p>
<p>123456</p>
<p>123456</p>
<p>123456</p>
<p>123456</p>
</div>
</a-modal>样式特殊处理
<style lang="scss" scoped>
/deep/.ant-modal-body {
max-height: calc(80vh - 150px);
overflow-y: auto;
&::-webkit-scrollbar {
width: 6px;
/*高宽分别对应横竖滚动条的尺寸*/
height: 1px;
}
&::-webkit-scrollbar-thumb {
// -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
background: #e3e3e6;
border-radius: 6px;
}
&::-webkit-scrollbar-track {
background: transparent;
// -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
border-radius: 5px;
}
}
</style>边栏推荐
- 符合信创要求的堡垒机有哪些?支持哪些系统?
- 实现一个深克隆
- 开源SPL消灭数以万计的数据库中间表
- laravel throws the error to Dingding
- Vivado crashes or the message is not displayed
- 串口服务器调试助手使用教程,串口调试助手使用教程【操作方式】
- AWS 安全基础知识
- PHP 判断文件是否有内容,没有内容则复制另一个文件写入
- A unit test report for CRM One Order Application log
- 【量化交易行情不够快?】一文搞定通过Win10 wsl2 +Ubuntu+redis+pickle实现股票行情极速读写
猜你喜欢

Error: Rule can only have one resource source (provided resource and test + include + exclude)

MySQL - storage engine for databases

【Gazebo入门教程】第三讲 SDF文件的静/动态编程建模
![[JS Advanced] Creating sub-objects and replacing this_10 in ES5 standard specification](/img/3e/14a1d7c2837c896eaa0ca625eaa040.png)
[JS Advanced] Creating sub-objects and replacing this_10 in ES5 standard specification
雨水中存在的PFAS化学物质对饮用水安全构成了威胁

借数据智能,亚马逊云科技助力企业打造品牌内生增长力

Interface Automation Testing Basics

系统的安全和应用(不会点安全的东西你怎么睡得着?)

记录几道整型提升的题目

ABAP file operations involved in the Chinese character set of problems and solutions for trying to read
随机推荐
一汽奥迪:持续34年聚焦品质与体验 立足市场需求推进产品迭代
需要被记录的OpenStack相关的命令_自己用
ABAP file operations involved in the Chinese character set of problems and solutions for trying to read
Short read or OOM loading DB. Unrecoverable error, aborting now
开源SPL消灭数以万计的数据库中间表
[Study Notes] Persistence of Redis
laravel 抛错给钉钉
A method that can make large data clustering 2000 times faster
C# error The 'xmins' attribute is not supported in this context
Do not access Object.prototype method ‘hasOwnProperty‘ from target object....
file system design
注意力模型---Attention Model
tensorflow安装踩坑总结
leetcode 739. Daily Temperatures Daily Temperatures (Moderate)
recursive recursive function
[JS Advanced] Creating sub-objects and replacing this_10 in ES5 standard specification
数据产品经理那点事儿 一
“Oracle 封禁了我的账户”
Classifying irises using decision trees
串口服务器调试助手使用教程,串口调试助手使用教程【操作方式】