ant-design在 vue 抽屉（drawer）里面嵌套弹出框（modal）出现蒙层遮挡弹框问题

ant-design在 vue 抽屉（drawer）里面嵌套弹出框（modal）出现蒙层遮挡弹框问题

有时候会遇到这种情况，先打开抽屉，然后再抽屉里打开模态窗,出现模态窗被抽屉的的蒙层遮挡

问题：
可能造成这种情况的原因是：
a-drawer和a-modal都是挂载到body上面的，并且我们发现a-drawer的层级比a-modal高，可能会造成这种情况。

解决思路：减低抽屉（drawer）和模态窗（model）的层级，使模态窗(model)的层级高于抽屉(drawer)的层级。

第一种解决方法：

我查看 Ant Design Vue的官方文档（https://2x.antdv.com/components/drawer-cn）发现，Drawer 抽屉组件中的API中有这样一个AP!

用这个API的解决思路是，将抽屉（drawer）挂载到当前的父元素上，然后模态窗（model）是挂载在body上的，这样就会让模态窗（model）的层级比抽屉（drawer）的层级高。使模态窗（model）显示在抽屉(drawer)上面，不会被挡住。

ref=“drawer”

:getContainer=“() => $refs.drawer”

具体实现如下图

第二种解决方法：

是直接修改抽屉（drawer）或直接修改模态窗（model）的css中样式属性中的，z-index 属性，
降低抽屉（drawer）的z-index 属性的值
或提高模态窗（model）的z-index 属性的值。

注意：修改抽屉（drawer）或修改模态窗（model）样式的时候，可能会造成z-index 属性没有修改成功的情况，记得F12查看一下样式是否修改成功。如果没有可以用 css深度作用选择器（即样式穿透）,样式穿透,强制修改ant-design的原生样式。

本文引用

ant vue 抽屉里面加弹窗显示被遮住问题

抽屉（el-drawer）里面嵌套弹出框（el-dialog）出现蒙层遮挡弹框问题

vue——css深度作用选择器 >>> 、/deep/ 、::v-deep

::v-deep，css深度作用选择器

vue3使用深度选择器