1、先上个图,我们要实现如下的效果,中间的表格部分要自动随Modal的改变而改变。官方:Ant Design Vue — An enterprise-class UI components based on Ant Design and Vue.js
2、那我们一定要能够检测到Modal的宽高的改变才行,然后Modal并没有提供这样的方法,没法回调来编写代码
3、我们可以使用Observer来监检Modal的改变:
function registerObserver() {
const modal = document.querySelector('.ant-modal');
if (modal) {
resizeObserver.observe(modal);
} else {
console.log('modal is null');
}
}
这个是antdv3的版本,4的版本不知道样式有没有改变,根据实际情况要进行调整。
const modal = document.querySelector('.ant-modal');
这里一定要是ant-modal,其它的不行,比如 ant-modal-root,并不能实现全程的Observer对Modal的检测改变。
4、还有一点要注意的,调用registerObserver在适当的时机才行,否则modal is null;
5、退出的时候,要断开检测
onBeforeUnmount(() => {
// 停止监听 Modal 的尺寸变化
resizeObserver.disconnect();
});
5、console.输出的结果
6、通过这样我们就可以通过监听也将表格的高度进行动态赋值,来实现我们想要的随Modal的改变而改变高度了。