ant-design-vue模态框a-modal设置高度并可滑动问题
先挂官方文档链接ant-design-vue官网文档文档中并没有说如何限制高度,百度了很多说是通过设置modal body的class来实现限制高度:deep(.ant-modal-body) {height: 100px !important;}这种方法我试了,不行。下面是亲测可行的方法官网里有个属性是body-style,这里可以设置modal的高度<a-modal :body-styl
·
先挂官方文档链接
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
更多推荐
已为社区贡献1条内容
所有评论(0)