[已解决]Vue3+Element-plus使用el-dialog对话框无法显示

于 2024-03-30 09:42:06 发布
阅读量1.2k 收藏 5
点赞数 1
分类专栏： 开发杂记 文章标签： vue element-plus el-dialog DOM
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bfbshs_ddd/article/details/137159662
版权

文章目录

问题发现

点击按钮，没有想要的弹框
在这里插入图片描述
代码如下
在这里插入图片描述
修改 el-dialog到body中，还是不能显示
在这里插入图片描述

原因分析

使用devtool中vue工具进行查看组件结构
在这里插入图片描述
原因在于，在一个局部组件(Detail->ElTabPane->…)中使用el-dialog，这个局部组件实际DOM结构中层级较低，限制了遮罩的扩展，el-dialog是覆盖整个页面区域的组件。
应该在更高层级来显示el-dialog，可以使用Vuex、props+emit、事件总线（Event Bus）来控制它的显示与隐藏。

解决方法

回忆原来在较高DOM层级的组件（Detail）中也有使用el-dialog，我考虑使用Vuex中的state来保存弹窗显示状态、以及弹窗内容的选择（条件渲染），这样，两个场景下的弹窗都可以共用这一个el-dialog组件
在这里插入图片描述

bfbshs_ddd
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用vue3+Element plus开发移动端Dialog打不开问题
m0_51531740的博客
08-22 2090
然后我把模态框中的el-form删除，来测试模态框是否实现，打包后发现模态框正常，于是问题在于其中的el-form，之后使用input标签和button标签，打包后发现原生H5标签不影响模态框，于是就将el-form换成了form，打包测试发现使用form仍无法解决问题，但是不用包裹的input标签和button标签可以显示，于是删除外层的标签，问题解决。之后发现可以在模态框中使用，推测使用vue3开发移动端时，模态框的实现控制不了多层复杂标签。
vue3-element-admin：vue3 + element-plus + typescript 后台管理系统
05-04
vue3-element-admin 是【有来开源组织】基于 Vue3 + Vite4 + TypeScript + Element-Plus + Pinia 等前端主流技术栈从0到1搭建后台管理系统模板（前后端开源）。 后端是基于 Spring Boot 3.0 、Spring Security 6.0 、 JWT 、 Redis 、 Mybatis-Plus 、 Knife4j 等技术栈搭建的前后端分离开源权限管理系统。 在线预览地址：http://vue3.youlai.tech 开源仓库地址：https://gitee.com/youlaiorg/vue3-element-admin 后端仓库地址：https://gitee.com/youlaiorg/youlai-boot
vue3+element-plus中dialog对话框组件去掉遮罩层后可以操作底层页面，以及弹窗嵌套弹窗如何去掉遮罩层且可以操作底层页面
最新发布
liuzaixi的博客
03-18 995
三、如果是弹窗嵌套弹窗，以上方法可能不会去掉遮罩层，这时就需要添加官网给出的另一个属性：append-to-body，具体解释可以查看官网。是自定义类名，和下面代码中的类名相同即可。
vue3+element-plus Dialog对话框的使用 与 setup 写法的使用
热门推荐
bigpatten的博客
07-20 1万+
/ 定义控制弹窗显隐的变量。"监听flag值得变化:"// 接受父组件传过来的值。'你点击了确定按钮''你点击了确定按钮''你点击了确定按钮'// 将变量暴露出来。
解决问题：Element ui组件中Dialog对话框只显示遮罩层，不显示弹框内容
qq_53857666的博客
04-03 1650
Element ui组件中Dialog对话框只显示遮罩层，不显示弹框内容
关于Vue3中，element-plus的el-dialog对话框无法显示的可能原因。
ky51336的博客
05-07 6562
关于Vue3中，element-plus的el-dialog对话框无法显示的可能原因。
el-dialog在vue3项目中不显示问题
Fore_的博客
02-24 2654
vue3项目开发有关elementplus问题
4种方案教你彻底解决vue + el-dialog的model的状态已经改变但是却不显示弹窗,×号点击后异常无法显示弹框
tangdou369098655的博客
02-22 1317
如果你是VUE2.X，请检查你是否在:visible这个属性上加.sync，就像这样:visible.sync=“dialogVisble”，vue3应该是v-model的绑定方式，请去查文档~如果方案1没有解决，可以尝试将x号绑定和取消一样的方法来进行关闭。找到元素，手动在dom里面把mask的display改成show。欢迎大家指出文章需要改正之处~
element-ui中弹框dialog不显示
Evan's Blog ٩(๑❛ᴗ❛๑)۶
02-14 1万+
一、问题描述 今天在写vue项目时候， 遇见如下需求：点击编辑按钮弹出一个dialog,dialog中的表单展示当前行显示数据，然后编辑后保存。 但是我点击后，出现了遮罩层，但是dialog怎么也不显示，如图。 二、解决方案 这里是由于一个属性没有设置正确导致的问题。在el-dialog 标签内，添加如图红色矩形框内所示属性。 且设置为ture，即可解决问题。 正确效果： 三、文档说明 我们...
vue3 el-dialog不显示
JavaBigData的博客
12-23 751
【代码】vue3 el-dialog不显示。
自定义Dialog弹框和其背景阴影显示方法
08-27
今天小编就为大家分享一篇自定义Dialog弹框和其背景阴影显示方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
解决vue中el-tab-pane切换的问题
11-20
今天在编写vue的时候用到了el-tabs，然后遇到切换的时候，在次打开el-dialog还是上次的状态（因为两次打开的el-tab-pane数量不一样，就出现了问题） 如下： 第一次打开时的状态，打开到第二次的时候 解决方法 给el-tab-pane命名 在script中 data() { return { isShow: '', activeName:'second' } }, 在每次关闭弹框的时候，在关闭方法中重置activeName
Vue3.0+TypeScript+Element-Plus编写的一套后台管理系统（兼容移动端）.zip
05-02
Vue3.0+TypeScript+Element-Plus编写的一套后台管理系统（兼容移动端），使用了最新的vue3 vite2 Element-Plus TypeScript等主流技术开发，开箱即用的中后台前端解决方案，也可用于学习参考。 Vue3.0+TypeScript+Element-Plus编写的一套后台管理系统（兼容移动端），使用了最新的vue3 vite2 Element-Plus TypeScript等主流技术开发，开箱即用的中后台前端解决方案，也可用于学习参考。 Vue3.0+TypeScript+Element-Plus编写的一套后台管理系统（兼容移动端），使用了最新的vue3 vite2 Element-Plus TypeScript等主流技术开发，开箱即用的中后台前端解决方案，也可用于学习参考。 Vue3.0+TypeScript+Element-Plus编写的一套后台管理系统（兼容移动端），使用了最新的vue3 vite2 Element-Plus TypeScript等主流技术开发，开箱即用的中后台前端解决方案，也可用于学习参考。 ........
如何更改Dialog的标题与按钮颜色详解
01-04
前言 本文主要给大家介绍了如何更改Dialog的标题与按钮颜色的相关内容，分享出来供大家参考学习，下面话不多说了，来一起看看详细的介绍吧。 android.support.v7.app.AlertDialog 在这个类中第一行就定义了如下变量: final AlertController mAlert; AlertDialog的功能的具体实现都在这个AlertController内部封装. 修改按钮颜色 1. AlertDialog.getButton public Button getButton(int whichButton) { return mAlert.getButton
Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0后台管理系统
05-02
Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+...
Vue3+element-plus-table-dragable(Sortable.js)实现表格拖动排序
06-15
在网上找的（vue3+sortable.js根本跑不起来）网上好多例子在vue3下根据跑不起来于是，也没有对表格排序的例子。Vuedraggable 是基于并提供Sortable.js的所有功能。重用现有element-plus组件库。对于小白来说怎么在...
vue3.0+element-plus实现国际化语言，动态路由菜单demo
01-27
vue3.0+element-plus实现国际化语言，动态路由菜单demo
解决vue2项目 el-dialog弹窗不显示
paradoxaaa_的博客
12-22 1305
将v-model改为:visible.sync="dialogVisible" 就可以了。我们还需要增加一个配置：:append-to-body="true"初始写法 使用了v-model 弹窗不显示。但是此时的弹窗在遮罩层底下 无法点击关闭。
请你用vue3+element-plus+ts二次封装一个el-dialog
05-22
好的，我可以为你提供一个基本的ElDialog封装，供你参考： ```vue <template> <el-dialog :title="title" :visible.sync="dialogVisible" :before-close="handleClose" :close-on-click-modal="false" :custom-class="customClass" :width="width" :lock-scroll="lockScroll" :modal-append-to-body="modalAppendToBody" :destroy-on-close="destroyOnClose" :center="center" @opened="handleOpen" @closed="handleClosed" v-bind="$attrs" v-on="$listeners" > <slot></slot> </el-dialog> </template> <script lang="ts"> import { defineComponent } from 'vue'; import { ElDialog } from 'element-plus'; export default defineComponent({ name: 'MyDialog', props: { title: { type: String, default: '', }, dialogVisible: { type: Boolean, default: false, }, customClass: { type: String, default: '', }, width: { type: String, default: '50%', }, lockScroll: { type: Boolean, default: true, }, modalAppendToBody: { type: Boolean, default: true, }, destroyOnClose: { type: Boolean, default: false, }, center: { type: Boolean, default: true, }, }, emits: ['update:dialogVisible', 'opened', 'closed'], methods: { handleClose(done: () => void) { // 自定义关闭操作 done(); }, handleOpen() { this.$emit('opened'); }, handleClosed() { this.$emit('closed'); }, }, components: { ElDialog, }, }); </script> ``` 这里我们使用了Vue3的Composition API，使用`defineComponent`定义了一个组件，并引入了Element Plus的ElDialog组件。 我们将ElDialog组件的属性和事件通过props和emits暴露出来，并在组件内部进行了一些自定义操作，如自定义关闭操作和自定义事件触发。 你可以根据自己的需求对组件进行进一步封装和定制化。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值