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

JackieDYH

已于 2023-08-02 13:44:58 修改

阅读量1w

点赞数 4

分类专栏： Vue 文章标签：前端 html javascript antd a-modal

于 2022-08-10 09:45:48 首次发布

本文链接：https://blog.csdn.net/JackieDYH/article/details/125897031

版权

Vue 专栏收录该内容

309 篇文章 78 订阅

订阅专栏

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

效果

代码-官方组件库说明

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