iView的对话框Modal修改成内部滚动的方法

2022-08-11 47点热度 0人点赞 0条评论

问题描述

iView的模态对话框(Modal)默认情况下,如果里面的内容很多,需要滚动的时候,会使整个屏幕滚动(滚动条会出现在屏幕最右侧),而我们理想的状态应该是对话框中进行滚动,这样对话框的Header和Footer都不用滚动就一直显示在屏幕上,方便关闭和提交等按钮的直接操作。

实现

实在的方法很简单,稍加修改CSS便可,css加上:

.ivu-modal-body {
    max-height: calc(100vh - 150px);
    overflow-y: auto;
}

我们给Modal里面的内容使用用的ivu-modal-body类加上max-height,不过需要根据不同的屏幕高度做调整,所以使用了calc来计算出实际的最大高度(屏幕的高度减去150px)。

效果如图所示:

admin

这个人很懒,什么都没留下

文章评论

您需要 登录 之后才可以评论