当前位置:网站首页>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>边栏推荐
- [219] The training course notes of the go engineer with more than 3,000 MOOCs 02 Programming ideas in the go language
- PHP judges whether the file has content, and if there is no content, copy another file to write
- 数据产品经理那点事儿 二
- 普林斯顿微积分读本05第四章--求解多项式的极限问题
- Stream通过findFirst()查找满足条件的一条数据
- MySQL - 数据库的存储引擎
- 使用决策树对鸢尾花进行分类
- 力扣解法汇总640-求解方程
- recursive recursive function
- IT小白怎么系统的php学习
猜你喜欢

写不完的数学试卷-----试卷生成器(Qt含源码)

Interface Automation Testing Basics

【JS高级】ES5标准规范之创建子对象以及替换this_10

AWS Security Fundamentals

高数_证明_弧微分公式

【ECCV 2022|Millions of Prizes】PSG Competition: Pursuing the "Most Comprehensive" Scene Understanding

正则表达式(包含各种括号,echo,正则三剑客以及各种正则工具)

关于已拦截跨源请求CORS 头缺少 ‘Access-Control-Allow-Origin‘问题解决

SQL学习(基础)

注意力模型---Attention Model
随机推荐
【量化交易行情不够快?】一文搞定通过Win10 wsl2 +Ubuntu+redis+pickle实现股票行情极速读写
写不完的数学试卷-----试卷生成器(Qt含源码)
Circle 创始人回应美财政部禁止 Tornado :隐私与安全之间关系紧张
统信 UOS V20 专业版(1050update2)发布:文件共享、全局搜索等优化
numpy.meshgrid()理解
ES5和SE6来实现一个Promise效果
OpenStack-related commands that need to be recorded _ self-use
2022-08-09:以下go语言代码输出什么?A:否,会 panic;B:是,能正确运行;C:不清楚,看投票结果。 package main import ( “fmt“ “syn
系统的安全和应用(不会点安全的东西你怎么睡得着?)
[JS Advanced] Creating sub-objects and replacing this_10 in ES5 standard specification
AWS Security Fundamentals
使用决策树对鸢尾花进行分类
Vivado crashes or the message is not displayed
CodeForces - 811A
作业
串口服务器调试助手使用教程,串口调试助手使用教程【操作方式】
指针(C语言初解)
C#实现访问OPC UA服务器
FPN详解
实现一个深克隆