先挂官方文档链接
ant-design-vue官网文档
文档中并没有说如何限制高度,百度了很多说是通过设置modal body的class来实现限制高度

:deep(.ant-modal-body) {
  height: 100px !important;
}

这种方法我试了,不行。

下面是亲测可行的方法
官网里有个属性是body-style,这里可以设置modal的高度

<a-modal :body-style="bodystyle"></a-modal>
const bodystyle = {
  height: '480px',
  overflow: 'hidden',
  overflowY: 'scroll',
}

这里如果你用的是js,那么到这里应该是没有问题了,但是如果你用的是ts,这里就会有错误了,

这里就会显示overflowY与CSSProperties类型不兼容,在源码里找到接口CSSProperties

export interface CSSProperties
  extends CSS.Properties<string | number>,
    CSS.PropertiesHyphen<string | number> {
  /**
   * The index signature was removed to enable closed typing for style
   * using CSSType. You're able to use type assertion or module augmentation
   * to add properties or an index signature of your own.
   *
   * For examples and more information, visit:
   * https://github.com/frenic/csstype#what-should-i-do-when-i-get-type-errors
   */
}

点击了下面的github地址,发现文档里面有说如何增加未定义的类型。

declare module 'csstype' {
  interface Properties {
    overflowY?: string;//增加报错的属性
  }
}

到这里,目前就没有问题了,界面也是可以滑动的。
在这里插入图片描述

如果有任何问题,欢迎评论~ o.0

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐