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

问题描述

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）。

效果如图所示：