vue el-dialog嵌套解决无法点击问题

产生原因:

当你在 el-dialog 上嵌套另一个 el-dialog 窗口时,可能会遇到内部对话框无法点击的问题。这通常是由于嵌套对话框的遮罩层(overlay)或其他样式问题造成的。

解决方案:

如果你的 el-dialog 组件支持 append-to-body 属性,你可以将对话框附加到 body 元素上,以避免 z-index 问题。

复制代码
<template>
  <el-dialog :visible.sync="isVisible" :before-close="handleClose" append-to-body>
    <p>外层对话框</p>
    <el-dialog :visible.sync="innerVisible" :before-close="handleInnerClose" append-to-body>
      <p>内层对话框</p>
    </el-dialog>
  </el-dialog>
</template>
相关推荐
腻害兔4 小时前
【若依项目-产品经理视角】深度拆解 RuoYi-Vue-Pro 商城模块:从商品管理到交易引擎,50 张表撑起一整套电商系统
java·大数据·vue.js·产品经理·ai编程
sugar__salt10 小时前
Vue3 表单双向绑定与响应式核心 API 技术详解
前端·javascript·vue.js
郝亚军11 小时前
使用Vue 3和Nginx打包和部署Vue.js项目的一般步骤
前端·vue.js·nginx
阿懂在掘金13 小时前
企业级命令式弹窗方案:三行代码适配已有 Dialog
前端·vue.js·前端框架
YWL13 小时前
OpenLayers + Vue 2 使用指南(01)
前端·javascript·vue.js
达子66614 小时前
第8章_HarmonyOs开发图解 剪贴板
vue.js
森林的尽头是阳光15 小时前
tree回显问题
javascript·vue.js·elementui
qetfw17 小时前
MWU:Vue 3 + FastAPI 的 MaaFramework 跨平台 WebUI 源码
前端·vue.js·python·fastapi·开源项目·效率工具
mfxcyh17 小时前
Vue3+Ant Design Vue 实现手动异步文件上传(含大小校验、弹窗上传)
前端·javascript·vue.js
meilindehuzi_a17 小时前
Vue3进阶基础:指令修饰符、v-model表单绑定、动态样式、计算属性与侦听器实战
前端·javascript·vue.js