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

2024-05-10 10:29:08

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中有这样一个API，
用这个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使用深度选择器

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

使用Ant Design 和Vue，React中后台开发套餐
2019独角兽企业重金招聘Python工程师标准>>> 前言目前Ant Design 提供 React 和 Vue 两种整合开发框架,开箱即用的中台前端/设计解决方案,可适合中小公 ...
创建Vue+TS+Ant Design of Vue 项目
创建Vue+TS+Ant Design of Vue 项目创建项目选择配置运行项目安装 ant-design-vue 安装 babel-plugin-import 使用VS Code打开配置 ...
Ant Design of Vue +TS 表单动态增加数据验证卧坑姿势
文章目录 Update 20210601 Update 20210525 原文: 1.a-form的model 2.获取数据源码 Update 20210601 今天做别的页面的时候发现又取不到数据 ...
ant design of vue分页/layui实现分页
ant design of vue分页官方文档:https://www.antdv.com/components/pagination-cn/ 结果: 代码: <a-paginationv-i ...
ant design pro vue左侧菜单自定义图标
做ant design pro vue项目的时候突然想修改左侧菜单的图标,在修改途中发现源码中提供的方法方法居然不生效(如下所示) 在src/assets/icons文件夹中下载svg图标在src/ ...
标题Ant Design of Vue 组件库中Modal“确认“按钮和“取消“按钮成英文状态
标题Ant Design of Vue 组件库中Modal"确认"按钮和"取消"按钮成英文状态因为是国际化的原因,造成确定按钮和取消按钮变成英文,需要设置 o ...
Vue.js高效前端开发 • 【Ant Design of Vue框架进阶】
全部章节 >>>> 文章目录一.栅格组件 1.栅格组件介绍 2.栅格组件使用 3.实践练习二.输入组件 1.输入框组件使用 2.选择器组件使用 3.单选框组件使用 4.实践 ...
基于Ant Design of Vue实现时长组件 duration
最近遇到一个需求,需要一个输入时长的组件,在经过一番寻找后没有合适的,最终自己动手写一个(实现了v-model双向绑定),记录一下,也给小伙伴们提供一个方便. 本示例基于ant design of v ...
ant design pro vue 动态路由流程详解
ant design pro vue 动态路由流程详解前言流程图流程1 src/permission.js 流程2 src/store/modules/user.js 流程3 src/perm ...

最新文章

热门文章