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 小时前
Vue项目Iconify的使用以及自定义图标,封装图标选择器
前端·javascript·vue.js
l***O5205 小时前
前端路由历史监听,React与Vue实现
前端·vue.js·react.js
滿5 小时前
vue3 elementplus el-table toggleRowSelection使用方法
javascript·vue.js·elementui
Coder-coco7 小时前
点餐|智能点餐系统|基于java+ Springboot的动端的点餐系统小程序(源码+数据库+文档)
java·vue.js·spring boot·小程序·论文·毕设·电子点餐系统
by__csdn8 小时前
Electron+Vite:实现electron + vue3 + ts + pinia + vite高效跨平台开发指南
前端·javascript·vue.js·typescript·electron·node.js·vue
詹姆斯bind9 小时前
基于Div contenteditable 属性 实现一个 “只读” 标签编辑器
vue.js·编辑器·contenteditable
JIngJaneIL10 小时前
远程在线诊疗|在线诊疗|基于java和小程序的在线诊疗系统小程序设计与实现(源码+数据库+文档)
java·数据库·vue.js·spring boot·小程序·毕设·在线诊疗小程序
笙年12 小时前
Vue 作用域插槽
前端·javascript·vue.js
鱼锦0.014 小时前
基于spring+vue把图片文件上传至阿里云oss容器并回显
java·vue.js·spring
zeijiershuai14 小时前
Vue 工程化、ElementPlus 快速入门、ElementPlus 常见组件-表格组件、ElementPlus常见组件-分页条组件
前端·javascript·vue.js