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

最新推荐文章于 2025-03-12 11:28:26 发布
最新推荐文章于 2025-03-12 11:28:26 发布
阅读量4.2k 收藏 7
点赞数 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组件
在这里插入图片描述

【Vue笔记】基于vue3 + element-plus + el-dialog封装一个自定义的dialog弹出窗口组件
✅ Java 开发工程师，从事 Web 应用程序的研发，擅长 Spring、SpringBoot 等技术。 ✅ 热爱编程，业余时间学习新知识，通过 CSDN 记录学习心得和笔记内容。
11-19 1186
v-model模式下，默认的属性名称是【modelValue】，可以省略不写，这种方式下，只需要在使用组件的时候，直接写【v-model】就可以实现数据的双向绑定。如果你想自定义属性名称，那么你就必须使用【v-model:属性名称】的格式来进行数据的双向绑定，这种模式下，必须指定属性名称，要和子组件中的props属性名称相同，另外emits发送事件的时候，也要使用【emits("update:属性名称")】这种格式，这样才可以完成数据的双向绑定。
vue3+element-plus 项目中 el-switch 刷新后自动触发change？坑就藏在这里！
最新发布
代码简单说 Vue、JAVA、PHP、Node.js 熟练运用，接口、架构、性能全搞定。
03-14 253
el-switch组件的和必须和v-model绑定的值类型一致如果没有加，那么它们是字符串，可能会触发@change事件遇到@change刷新后自动触发的问题，优先检查数据类型是否匹配这个问题看似简单，但实际上是官方的默认行为，所以遇到这种坑，先去 GitHub issue 搜一下，可能就能少踩点坑 😆。
解决el-dialog使用时无法正常弹出的问题
weixin_43550562的博客
04-24 6499
在使用el-dialog,发现无论怎么做,该对话框也无法显示,前端也没有报错. 点击按钮时,发现遮罩层已经出来了,但对话框没有显示. 经查,缺少属性append-to-body,将该值设置为true即可 <!--审批悬浮框--> <el-dialog class="el-dialog__width" ...
el-dialog(vue3 总结)
qq_38210427的博客
03-12 254
之所以会产生这种问题，是因为elementUi在对Dialog组件做初始化的时候，默认让该Dialog在点击组件以外区域会导致该组件关闭，所以elementUI 一定会将该属性暴露出来让开发人员进行配置。通过查询ElementUI的官方文档，发现在Dialog下有个‘close-on-click-modal’属性，该属性默认值为‘True’，作用为：是否可以通过点击 modal 关闭 Dialog。所以，通过设置Dialog下的close-on-click-modal属性为‘false’，即可解决该问题。
关于Vue3中，element-plus的el-dialog对话框无法显示的某一解决方法
xiaohuangmonkey的博客
07-08 1291
在Vue3+element-plus中使用官方的对话框代码无法弹出正常弹出对话框。
使用vue3+Element plus开发移动端Dialog打不开问题
m0_51531740的博客
08-22 2629
然后我把模态框中的el-form删除，来测试模态框是否实现，打包后发现模态框正常，于是问题在于其中的el-form，之后使用input标签和button标签，打包后发现原生H5标签不影响模态框，于是就将el-form换成了form，打包测试发现使用form仍无法解决问题，但是不用包裹的input标签和button标签可以显示，于是删除外层的标签，问题解决。之后发现可以在模态框中使用，推测使用vue3开发移动端时，模态框的实现控制不了多层复杂标签。
el-dialog在vue3项目中不显示问题
Fore_的博客
02-24 3041
vue3项目开发有关elementplus问题
vue3点击按钮el-dialog对话框不显示问题
weixin_66071584的博客
11-17 508
vue3弹框不显示问题，控制台也没报错。
Vue3框架&Element中的el-dialog对话框无法显示的问题及解决方法
YourPasser的博客
12-23 673
element-ui与element-plus的官网文档
Vue3.0+TS+el-element-plus封装的Dialog 对话框
m0_56856837的博客
01-26 2384
<template> <div v-drag> <el-dialog ref="dialog" v-model="layer.show" :title="layer.title" :width="layer.width" center > <slot></slot> <template #footer v-if="layer.showBu.
使用vue3+element-ui plus 快速构建后台管理模板
10-17
Vue3和Element UI Plus是现代前端开发中的两个热门工具，它们结合在一起可以高效地搭建功能丰富的后台管理系统。Vue3作为Vue.js的最新版本，引入了许多性能优化和开发体验改进的特性，而Element UI Plus则是基于...
Vue3+element-plus+axios 综合小案例
09-26
例如，使用<el-table>来展示数据，<el-dialog>来实现弹出对话框，<el-form>和<el-input>用于表单输入等。 axios是一个广泛使用的JavaScript库，用于在浏览器和node.js中发送HTTP请求。在Vue3应用中，axios常用来与...
vue3的dialog对话框无法显示的问题
qq_68155756的博客
02-13 2414
使用elementui的对话框组件时无法使对话框显示的问题
VUE3 封装 element-plus中的 dialog 组件
nathercloud的博客
03-27 1657
VUE3 封装 element-plus中的 dialog 组件
vue3 elementui 组件el-dialog中添加组件后报错无法弹出dialog记录
mmmMMM12345的博客
11-16 612
然后就报warninig，并且发现此dialog不起作用了。原因是子组件必须写到el-dialog标签内部，修改后如下。然后我在这个组件内又添加里一个组价，如下。我的组件的代码大致如下。
4种方案教你彻底解决vue + el-dialog的model的状态已经改变但是却不显示弹窗,×号点击后异常无法显示弹框
tangdou369098655的博客
02-22 3148
如果你是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中组件不显示的解决方法（已解决）
m0_54568435的博客
03-13 4195
方法来动态加载 Element Plus 的组件，以避免编译时无法解析的问题。这样可以确保在运行时正确加载 Element Plus 的组件。方法来动态加载 Element Plus 的组件，可以在运行时正确解析组件，避免编译时的错误。选项1选项2选项3
el-dialog中echarts图表不显示的解决方案
anglra的博客
11-08 1919
在vue的项目开发中，会有这样一种情况，我们需要在dialog中防止echarts图示，但是在上手的时候会发现，第一次打开dialog时图示不会显示，但是第二次打开之后就显示了。
自定义指令el-dialog的放大缩小vue3+element-plus
01-01
### 创建自定义指令实现 `el-dialog` 缩放功能 为了实现在 Vue 3 和 Element Plus 中创建自定义指令以支持 `el-dialog` 组件的缩放功能，可以遵循以下方法： #### 自定义指令设计思路 通过绑定自定义指令到 `.el-dialog__wrapper` 或者特定于对话框的内容区域，允许用户点击并拖动指定的手柄（通常是四角之一）来改变对话框尺寸。考虑到用户体验和交互逻辑，需确保当用户在特殊 HTML 元素上释放鼠标按钮时仍能正常结束拖拽操作[^1]。 #### 关键点处理 - **样式调整**：移除默认设置中的 `right` 和 `bottom` 属性，仅保留 `left` 和 `top` 来定位对话框的位置。 - **边界检测**：保证用于触发拖拽行为的元素始终位于视口内可见范围之内，防止因超出屏幕而造成不良体验。 - **解决 onmouseup 失效问题**：针对某些情况下无法捕获 `onmouseup` 事件的问题，可以通过监听全局文档级别的 `mouseup` 事件作为替代方案，从而确保即使是在非标准元素处松开鼠标也能正确终止当前的操作流程。 #### 实现代码示例 下面是一个简单的例子展示如何利用 Vue 3 的 Composition API 结合自定义指令完成上述需求： ```javascript import { DirectiveBinding } from &#39;vue&#39;; export default { mounted(el: HTMLElement, binding: DirectiveBinding) { let startX = 0; let startY = 0; let startWidth = 0; let startHeight = 0; const resizeHandler = (e: MouseEvent) => { e.preventDefault(); // 更新宽度高度 el.style.width = `${startWidth + e.clientX - startX}px`; el.style.height = `${startHeight + e.clientY - startY}px`; // 设置最大最小宽高限制 if(parseInt(el.style.width)<200){ el.style.width=&#39;200px&#39; } if(parseInt(el.style.height)<200){ el.style.height=&#39;200px&#39; } // 发布更新后的尺寸给父组件或其他地方使用 binding.value && typeof binding.value === "function" && binding.value({ width: parseInt(el.style.width), height: parseInt(el.style.height)}); }; const mouseUpHandler = () => { document.removeEventListener(&#39;mousemove&#39;, resizeHandler); document.removeEventListener(&#39;mouseup&#39;, mouseUpHandler); }; const handleMouseDown = (event: MouseEvent) => { startX = event.clientX; startY = event.clientY; startWidth = parseFloat(getComputedStyle(el).width.replace(&#39;px&#39;,&#39;&#39;)); startHeight = parseFloat(getComputedStyle(el).height.replace(&#39;px&#39;,&#39;&#39;)); // 添加移动和抬起事件监听器至整个document对象 document.addEventListener(&#39;mousemove&#39;, resizeHandler); document.addEventListener(&#39;mouseup&#39;, mouseUpHandler); // 阻止冒泡影响其他元素 event.stopPropagation(); }; // 将mousedown事件绑定到目标元素上 el.querySelector(&#39;.resize-handle&#39;)?.addEventListener(&#39;mousedown&#39;, handleMouseDown); // 移除原有样式中可能干扰布局的属性 Object.assign(el.style,{ position:&#39;absolute&#39;, right:&#39;unset&#39;,// 只保留left/top两个方向上的绝对定位 bottom:&#39;unset&#39;// 同理取消底部固定 }); }, }; ``` 此段代码展示了如何构建一个能够响应鼠标的按下、移动以及释放动作来自由调节 `el-dialog` 对话框大小的功能模块。需要注意的是实际应用过程中还需要考虑更多细节如动画过渡效果的支持等。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值