antd组件中a-modal设置固定高度,内容滚动显示

Posted JackieDYH

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了antd组件中a-modal设置固定高度,内容滚动显示相关的知识,希望对你有一定的参考价值。

当弹框内容过多时,会导致页面滚动显示数据,这个时候就需要处理一下这个弹窗的默认高度,让其出行滚动条进行显示多余数据内容 

效果

代码-官方组件库说明 

<!-- 预览弹窗 -->
<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>

以上是关于antd组件中a-modal设置固定高度,内容滚动显示的主要内容,如果未能解决你的问题,请参考以下文章

antd-mobile的ListView组件踩坑

通过props设置vue子组件的显示与隐藏

antd vue table滚动页面固定表头

即使没有内容,如何强制 antd 选项卡全高(使用 React 和样式化组件)

antd使用Layout组件,Content内容过多,造成页面塌陷

antd-vue 表格,固定左边第一列,设置滚动,有滚动条,第一列被隐藏