记录elementui 模态框modal的BUG

最新推荐文章于 2023-05-24 19:49:50 发布
最新推荐文章于 2023-05-24 19:49:50 发布
阅读量494 收藏
点赞数
分类专栏： 我的Vue学习记录 文章标签： elementui bug vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/WindHide520/article/details/125289298
版权

不知道为什么我的项目模态框一直占用最上层导致无法操作

看了一下文档有一个简单粗暴的方法

dialog 加 :append-to-body="true"

el-drawer加 :append-to-body="true"

如果还是没用就只能关闭了
 

<el-drawer  :modal="false">


直接在el-drawer中加一个 :modal="false"关闭模态框的弹出就好了

如果想要保留模态框的话可以看下这篇文章
 

记录elementui自带bug

我参照这个文档虽然说不会占用最上层，但是其他组件有一些小问题，所以直接关闭了模态框显示 

枫火叶灵
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue - ElementUI 模态框Dialog、Drawer抽屉框，将append-to-body设置为true后，使用deep覆盖样式失效解决办法（将弹框插入到body中样式覆盖失败）
王佳斌
03-20 2374
vue2，element-ui，el-drawer，el-dialog，抽屉弹框，对话框模态框，append-to-body，插入到body中无法使用deep覆盖样式，在element ui组件库中，使用el-drawer抽屉弹框组件，当设置append-to-body属性后，无法使用deep进行样式覆盖怎么办，关于vue+element中el-dialog设置append-to-body样式不生效问题，vue2 elementUI el-dialog修改了body样式不生效问题解决方案，element组件
element-ui框架的el-dialog弹出框被遮罩层挡住了/el-drawer....会生成v-model元素的组件被遮罩层挡住
李十三的博客
09-13 1759
参考我的这篇文章,但是在后面我发现只要是会生成v-model元素的饿了么组件,在使用的过程中都可能出现整个页面被遮罩层挡住的情况,解决方法其实都一样.element-ui框架的el-dialog弹出框被遮罩层遮挡问题_前端李十三的博客-CSDN博客。element-ui框架的el-dialog弹出框被遮罩层遮挡问题_前端李十三的博客-CSDN博客。可以发现el-dialog 组件显示的时候被遮罩层挡住了。可以发现el-dialog 组件显示的时候被遮罩层挡住了。
利用element-ui的dialog做模态框
u013771380的博客
10-26 2451
<template> <!-- 详细对话框 --> <el-dialog title="" :visible.sync="dialogVisible" width="80%"> <el-tabs v-model="activeName" type="border-card"> <el-tab-pane label="用户管理" name="info"> </el-tab-pane> &l...
element-ui表单验证错误提示问题
m0_37446642的博客
07-21 513
element-ui表单验证错误提示问题
element UI模态框复功能（自用）
曲小强
07-13 1521
<el-form-item label="适用城市" :rules="{ required: true }"> <el-button size="small" @click="addCity" type="primary">添加城市</el-button> <span v-if="checkCity.length !== 0"> <el-tag v-if="checkCity.lengt
vue+Element中，新增模态框
热门推荐
qq_42360843的博客
06-13 1万+
上代码 <el-button type="success" @click="addgsForm" icon="el-icon-edit">新增</el-button> <el-dialog :title="title" :visible.sync="dialogAddgsVisible" @close="closeDialogAddgsVisible"&...
Bootstrap模态框（Modal）实现过渡效果
08-31
主要为大家详细介绍了Bootstrap模态框（Modal）实现过渡效果的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
ModalLayer模态框插件js弹出框
06-11
ModalLayer是一款带多种形式的模态框插件，js网页弹出框代码，支持倒计时、确认对话框、弹窗iframe等。
Bootstrap 模态框(Modal)插件代码解析
08-31
Bootstrap 模态框（Modal）插件 模态框（Modal）是覆盖在父窗体上的子窗体。这篇文章主要介绍了Bootstrap 模态框(Modal)插件代码解析的相关资料,需要的朋友可以参考下
bootstrap 模态框（modal）实现水平垂直居中显示
08-31
主要为大家详细介绍了bootstrap 模态框modal实现水平垂直居中显示，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
浅析BootStrap中Modal（模态框）使用心得
10-20
Bootstrap Modals（模态框）是使用定制的 Jquery 插件创建的。本文给大家分享BootStrap中Modal（模态框）使用心得，一起看看吧
element - 封装模态框提示
King Saj
05-31 403
文件结构: 创建 modal.js import { Message, MessageBox, Notification, Loading } from 'element-ui' let loadingInstance; export default { // 消息提示 msg(content) { Message.info(content) }, // 错误消息 msgError(content) { Message.error(content) }, /
vue + element 实现主页面，主页面查询，新增模态框功能
weixin_38673922的博客
08-19 2068
vue + element 实现主页面，主页面查询，新增模态框功能。
Vue + Bootstrap|Element UI——模态框被遮罩层遮盖问题解决方案
无限迭代中......
03-21 2628
问题描述 问题分析 1）若dialog弹出框，它的遮罩层就会被插入到body标签下（即与组件所在的最外层div同一层级） Element UI中设置了modal-append-to-body='true'（默认）属性 2）dialog的显示层和遮罩层都设置了position:fixed，当然显示层的z-index肯定要比遮罩层的大，才能正常的显示弹出框。 问题就出在此处，若dia...
[Vue]模态框不能弹出的问题（模态框被封装成子组件时）
m0_51066449的博客
03-08 826
一、问题发现 当把element-ui模态框封装成子组件，并将其放入父组件时，通过props和$emit父子组件传值控制模态框的visible使其弹出和消失。 但是点击按钮改变父组件的isShow（从false变为true）并将其传给子组件，在created中传过来的值赋值给模态框的visible时，模态框并没有弹出，虽然created中的代码会执行，但visible没有获取到变化成true的isShow，visible的值一直是false。 二、解决方法 created只执行一次，当created
element-ui的modal使用问题小计
sparrow的博客
12-08 3050
问题描述： 在a-modal的弹出层隐藏之后，会有一个没消失的div遮盖住dom节点，使dom节点事件点击无效，代码如下： 解决定位： 由于考虑全局影响，所以加了class名称，并对改class定义宽高及垂直水平居中，由于有visible.sync的定义，modal本身是可以隐藏的，但发现dom节点被遮盖，点击事件无法响应发现就是这个宽高的影响，查看dom节点发现该div下面的mask和warp都有了display:none的样式，故将对该class定义的宽高及垂直水平居中移入warp的设置里，此问题解决
Vue3+elementPlus Modal弹窗高度私有修改不生效解决
朝花夕拾的博客
05-24 502
modal外层要添加一层div。
element-UI的Dialog弹出框蒙版被遮住
weixin_30535043的博客
06-13 145
类似于这种，相信会有很多人遇到这种问题的，其实解决的方法很简单 <el-dialog title="修改分类" :visible.sync="modifyFormVisible" :modal-append-to-body="false" width="30%" center> <el-form :model="modifyData" ref="...
elementui模态框如何使用
最新发布
10-26
ElementUI提供了一个el-dialog组件来实现模态框的功能。使用el-dialog组件可以轻松地创建一个模态框，并且可以自定义模态框的标题、内容、大小、位置等属性。以下是使用el-dialog组件创建模态框的步骤： 1. 在Vue...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值