Element ui 的组件弹窗 el-dialog点击的时候全屏变灰问题解决

最新推荐文章于 2024-02-22 11:01:50 发布
最新推荐文章于 2024-02-22 11:01:50 发布
阅读量829 收藏 8
点赞数 7
分类专栏： 前端 文章标签： elementui 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/CXYCMY/article/details/135922725
版权

最近在使用Element UI 的弹窗组件的时候发现这个组件各种的应用都没有问题，数据和元素的应用都是正确的但是在点击显示这个弹窗的时候全屏幕都会变灰。
在这里插入图片描述

这也不是因为增加了modal 遮挡幕的问题，在经过不断的排查代码的时候基本排除了代码的问题，这个时候就觉得是不是因为组件的某个元素使的这个屏幕变灰，这个时候就一直在百度这个问题，发现网上很多都是说这个组件的遮挡幕元素的布尔值设置的问题，但是在修改的过程中也排查了不是因为这个而导致的。
在这里插入图片描述

最后又看到很多例子都是简单的显示，但是我是在一个表格里面嵌套了template，然后在template中使用的Dialog组件，这就有可能导致一个显示的层级问题，导致他在点击的时候显示灰色，这个时候看到elment-ui文档中有一个append-to-body属性： Dialog 自身是否插入至 body 元素上。嵌套的 Dialog 必须指定该属性并赋值为 true

也就是因为忽略了这个嵌套的Dialog必须指定属性为true从而导致我的弹出框是灰色的，在修改了布尔值之后，弹框就可以正常的使用了。
在这里插入图片描述
**PS：**以后在使用组件的时候一定要注意组件的元素说明，否则就容易和我一样因为这个而白白耗费一两个小时来解决问题

CXYCMY
关注
  • 7
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
element-ui中dialog弹窗关闭按钮失效的解决
01-18
<el title=修改库存 visible.sync=kcDialog close=kcDialog> ... </el> 加一个@close可以是一个方法或者直接操作kcDialog为false 补充知识：webpack外部扩展，依赖前置 引入了外部js index.html <script src=...
element ui 两个弹层 背景变灰色问题
y1323400186的博客
12-06 692
在第二个弹层里面加上:append-to-body=“true” 完美解决 <el-dialog :visible.sync="dialogVisiblelistone" :append-to-body="true"> <img width="100%" :src="dialogImageUrlone" class="avatar" /> </el-dialog> ...
element ui 对话框el-dialog关闭事件详解
01-21
通常会有需求，在关闭弹框后需要清空填写的数据，这时候就需要关闭事件了 <el title=标题 visible.sync=bind size=small close='closeDialog'> </el> 在标签中加入@close=’closeDialog’ mothods中加入 //关闭弹框的事件 closeDialog(){ this.xxx = '';//清空数据 }, 以上这篇element ui 对话框el-dialog关闭事件详解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。
Element UI 双层弹窗 背景变灰问题 （遮罩层）
最新发布
qq_57229245的博客
02-22 326
只需要在第二个Dialog上加上append-to-body属性就可以完美解决问题。第二个弹窗不会被灰色遮罩遮盖。
el-dialog 对话框被灰色遮住问题
啊哦
01-12 1299
dialog组件使用的时候默认会把背景变成灰色，所以组件一定要放在布局的最外层，否则会连同dialog一起被灰色遮住。
element-ui中弹框dialog不显示，仅背景变灰
xy405580364的博客
11-04 5579
1.问题描述 根据element官网的对话框代码，使用时会发现弹框不显示，需要增加一个属性 :append-to-body="true" 2.加上之后效果 <template> <el-button type="text" size="mini" @click="copyPanel = true">复制</el-button> <el-dial...
【Vue】vue-element-ui一个表格中每一行的按钮如何实现按钮按条件置灰？
qq_31759203的博客
10-19 6084
工作中遇到这个需求，“中转”按钮点击之后置灰 思路： <el-table :data="tableList" stripe style="width: 100%; margin-top: 10px; line-height: 20px" :default-sort="{ prop: 'pk', order: 'descending' }" > methods: { getData() { const user_id = localStorage.getIt
el-dialog对话框设置全屏 如何把当前页面的 el-dialog切换全屏
暂时还没想好博客简介
05-18 2132
el-dialog对话框设置全屏 如何把当前页面的 el-dialog切换全屏
封装element Dialog实现全屏、最小、双击回复原状和拖拽功能
Queen-Shir的博客
07-28 2076
https://www.jianshu.com/p/fa36f0ed9222
vue el-dialog鼠标拖拽实现大小控制，拖拽移动位置
weixin_41463944的博客
12-09 1672
1、分装成js import Vue from 'vue'; Vue.directive('dialogDrag', { bind(el, binding, vnode, oldVnode) { //弹框可拉伸最小宽高 let minWidth = 400; let minHeight = 300; //初始非全屏 let isFullScreen = false; //当前宽高 let nowWidth = 0; let now
el-dialog 点开后背景是灰色，但是点击以后就又好了，解决方法
easyplayers的博客
11-19 2539
el-dialog 点开后背景是灰色，但是点击以后就又好了，解决方法
elementUI之Dialog对话框详解
weixin_43435271的博客
11-10 1488
【代码】elementUI之Dialog对话框详解。
基于element-ui对话框el-dialog初始化的校验问题解决
10-14
主要介绍了基于element-ui对话框el-dialog初始化的校验问题解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue 使用Dialog对话框使用过程中出现灰色遮罩问题
qq_41451744的博客
08-27 1777
vue 使用Dialog对话框使用过程中出现灰色遮罩问题
vue element点击弹框后页面置灰禁用问题解决
小科比的博客
05-11 4806
vue element插件中使用el-dialog时出现整个页面变灰禁用情况： 需要在vue代码中增加append-to-body属性 <el-dialog v-el-drag-dialog :visible.sync="showStaff" @close='closeStaffList' class="commonDialogBox" ref="commonDialogBoxStaff" :close-on-click-modal="false" :ap
el-dailog 显示出现灰色原因及解决方法
tonysh_zds的博客
09-17 3724
打开弹出框 第二个弹出框 样式 .v-modal{ opacity: 0.5 } 原有是第二个弹出框:append-to-body="false" 解决方法： 修改第二个弹出属性 :append-to-body="true" 。 如： <el-dialog :append-to-body="true" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.ti
element-ui的el-dialog弹框拖拽拉伸及双击全屏的方法
你的小可爱的博客~
01-08 1137
/ 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);// 鼠标按下，计算当前元素距离可视区的距离。// 通过事件委托，计算移动的距离。// 获取到的值带px 正则匹配替换。
element-ui dialog弹窗增加全屏功能
热门推荐
Mr.Tang的博客
12-24 1万+
完成效果图： 一、定义全局变量 dialogFull 用来控制弹窗 dialogFull:false, 二、dialog标签添加全局属性绑定 :fullscreen="dialogFull" 三、设置title区域的自定义 <template slot="title"> <div class="avue-crud__dialog__header"> <span class="el-dialog__title">
el-dialog 图片全屏
09-02
要实现el-dialog的图片全屏功能，可以通过对源码进行修改来实现。首先，可以修改el-dialog的class属性为[class="el-dialog is-fullscreen"]来使对话框全屏显示。 此外，在el-dialog的头部添加一个按钮，并设置其aria-label属性为"Fullscreen"，并且添加一个点击事件，用于处理全屏功能的切换。按钮的样式可以通过自定义的class来进行设置。 如果el-dialog提供的fullscreen功能无法满足业务需求，可以考虑直接对源码进行修改。可以克隆element官方的仓库到本地，并对源码进行相应的修改来实现自定义的对话框效果。这样可以更灵活地满足业务需求。 在自定义的对话框(Dialog)中，可以使用ViewPager来展示图片，并在底部添加圆点来表示当前展示的图片。可以设置是否自动滚动，并自定义对话框的样式，如去除背景黑色和边框等。这样可以实现一个自定义的对话框效果，可以满足展示图片全屏的需求。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [修改element-ui源码给el-dialog添加全屏功能](https://blog.csdn.net/qq_36157085/article/details/126869999)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *3* [自定义对话框(Dialog)效果](https://download.csdn.net/download/weixin_38667408/16381928)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值