当前位置:网站首页>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>
边栏推荐
- Interface Automation Testing Basics
- Stream通过findFirst()查找满足条件的一条数据
- 【POI 2008, BLO】Cut Point
- Open source SPL wipes out tens of thousands of database intermediate tables
- 锂电池技术
- Calculate the number of combinations recursively
- 指针(C语言初解)
- A method that can make large data clustering 2000 times faster
- SQL学习(基础)
- MySQL - storage engine for databases
猜你喜欢
随机推荐
tensorflow安装踩坑总结
网络安全——XSS之被我们忽视的Cookie
laravel throws the error to Dingding
Fragment's show and hide
d为何用模板参数
MQTT服务器搭建
第三方软件测评有什么作用?权威软件检测机构推荐
Lack of comparators, op amps come to the rescue!(Op amp is recorded as a comparator circuit)
Do not access Object.prototype method ‘hasOwnProperty‘ from target object....
A method that can make large data clustering 2000 times faster
[219] The training course notes of the go engineer with more than 3,000 MOOCs 02 Programming ideas in the go language
Open source SPL wipes out tens of thousands of database intermediate tables
The recursive recursive Fighting_ silver study ah but level 4
Vivado crashes or the message is not displayed
数据产品经理那点事儿 一
简单的写一个防抖跟节流
【MinIO】工具类使用
八大排序总是忘?快来这里~
系统的安全和应用(不会点安全的东西你怎么睡得着?)
雨水中存在的PFAS化学物质对饮用水安全构成了威胁