当前位置:网站首页>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>
边栏推荐
- Circle 创始人回应美财政部禁止 Tornado :隐私与安全之间关系紧张
- 【剑指offer】---数组中的重复数字
- 【POI 2008, BLO】割点
- 写不完的数学试卷-----试卷生成器(Qt含源码)
- Data product manager thing 2
- 汉字检测和关键词检测
- 正则表达式(包含各种括号,echo,正则三剑客以及各种正则工具)
- [target detection] small script: extract training set images and labels and update the index
- AWS Security Fundamentals
- sql语句 异常 Err] 1064 – You have an error in your SQL syntax; check the manual that corresponds to your
猜你喜欢
随机推荐
Import other custom namespaces in C#
使用决策树对鸢尾花进行分类
vue 怎么清除tab 切换缓存问题 ?
the height of the landscape
Classifying irises using decision trees
作业
【POI 2008, BLO】Cut Point
八大排序总是忘?快来这里~
[Study Notes] Persistence of Redis
MySQL - 数据库的存储引擎
缺少比较器,运放来救场!(运放当做比较器电路记录)
tensorflow安装踩坑总结
Lithium battery technology
recursive recursive function
Second half of 2011 System Architect Afternoon Paper II
EVE模拟器的使用-带图超详细(学网络用)「建议收藏」
CodeForces-834C
laravel 抛错给钉钉
日志@Slf4j介绍使用及配置等级
C# WPF image is displayed without problems, but the solution does not display the image at runtime