element-ui—dialog使用过程中的坑
场景一:我们将dialog写成一个可复用的公共组件用于显示不同内容(如表格操作中的修改或添加的弹窗),之后发现dialog的遮罩将弹出层(点击修改或添加后理应由一个弹窗显示出来)都盖住了,而我想要的效果是遮罩只遮住旧的窗口,而当前窗口应该完全显示;
(注:表格是使用easyui的panel和window来包裹的,dialog才是使用的element-ui中的组件)
百度了一圈最后的解决方案是在el-dialog上加入以下属性:
:modal-append-to-body="false"
意为:遮罩层是否插入至 body 元素上,若为 false,则遮罩层会插入至 Dialog 的父元素上
场景二: 同一个 项目中,dialog用于密码修改,且不引用上面的公共组件,直接使用<el-dialog></dialog>标签包裹一个form表单。结果表现是这样的:单独点击密码修改打开弹框没问题,但是若先打开一个table-window窗口后再点击密码修改按钮打开弹框,会发现此时的弹框会直接被
table-window遮盖,表面上看似层级不够的原因造成的,但是看了css样式并非如此,或者直接给dialog添加比bable高的层级,一样无济于事。
解决办法如下:在el-dialog上加入以下属性
:append-to-body="true"
博客上看到意为博友的解释是这样的:因为有时候会存在页面某些元素没有被 modal 盖上的情况,其实这种情况出现的原因就是你的dialog 是放在当前组件中的,如果放body 下则不会有这些情况!虽然也是似懂非懂,但是起码问题解决了,这就够了。
element-ui—dialog使用过程中的坑的更多相关文章
- Torch-RNN运行过程中的坑 [2](Lua的string sub函数,读取中文失败,乱码?)
0.踩坑背景 仍然是torch-rnn/LanguageModel.lua文件中的一些问题,仍然是这个狗血的LM:encode_string函数: function LM:encode_string( ...
- Torch-RNN运行过程中的坑 [1](读取Lua非空table,size为0)
0.踩坑背景 执行Torch-RNN的时候,在LanguageModel.lua中的encode_string函数中,对start_text的各个character进行id映射编码,实现功能类似“北京 ...
- Torch-RNN运行过程中的坑 [0](一些基础概念)
0.Lua & LuaJIT简介 Lua 是一种轻量小巧的脚本语言,用标准C语言编写并以源代码形式开放, 其设计目的是为了嵌入应用程序中,从而为应用程序提供灵活的扩展和定制功能. Lua 是巴 ...
- 菜鸟帮你跳过openstack配置过程中的坑
一:前言 对于一个以前做java全栈工程师而言,而且没学过Linux,很少用虚拟机(还是在大学的时候简单的用过),去配置openstack我想我入的坑肯定比有基础的一定要多,躺在每个坑中徘徊思索的时间 ...
- 菜鸟帮你跳过openstack配置过程中的坑[文末新添加福利]
一:前言 对于一个以前做java全栈工程师而言,而且没学过Linux,很少用虚拟机(还是在大学的时候简单的用过),去配置openstack我想我入的坑肯定比有基础的一定要多,躺在每个坑中徘徊思索的时间 ...
- 学习django3过程中的坑
最近跟着Django by Example 2015学习,可老想用最新版的Django3.在学的过程中可踩了不少坑. 今天就又碰到一个: 在这本书中96页有这样的代码: url(r'^login/$' ...
- Docker从零到实践过程中的坑
欢迎指正: Centos7 下的ulimit在Docker中的坑 http://www.dockone.io/article/522 僵尸容器:Docker 中的孤儿进程 https://yq.ali ...
- Vue发布过程中遇到坑,以及webpack打包优化
前言 这段时间,本人自己做了一个vue画面部署到自己的服务器上,发现运行速度慢的的惊人,虽然服务器很渣(本人没什么钱,只能租最差的服务器,主要是给自己学习用的),但是这样开发出来的网站简直不能用,所以 ...
- Ant+Jmeter自动化接口测试的部署 及 部署过程中的坑
一.环境准备: 1.Jdk1.6或以上:http://www.oracle.com/technetwork/java/javase/downloads/index.html 配置环境变量-系统变 ...
随机推荐
- 使用 Docker/LXC 迅速启动一个桌面系统
使用 Docker/LXC 迅速启动一个桌面系统 Docker 是 dotCloud 最近几个月刚宣布的开源引擎,旨在提供一种应用程序的自动化部署解决方案,简单的说就是,在 Linux 系统上迅速创建 ...
- 转载 初探Promise
初探Promise https://segmentfault.com/a/1190000007032448 javascript es6 promise 33.5k 次阅读 · 读完需要 65 分 ...
- Directx11教程(53) D3D11管线(8) GS的调度执行
原文:Directx11教程(53) D3D11管线(8) GS的调度执行 在前面的教程中,我们分析了VS-PS的shader管线组合执行过程,本章我们分析一下VS-GS-PS的管线执行 ...
- 仿Google Nexus菜单样式
在线演示 本地下载
- 用五种不同的布局方式实现“左右300px中间自适应”的效果
float浮动 <section class="layout float"> <style media="screen"> .layou ...
- 2019-8-30-C#-从零开始写-SharpDx-应用-笔刷
title author date CreateTime categories C# 从零开始写 SharpDx 应用 笔刷 lindexi 2019-8-30 8:50:0 +0800 2019-6 ...
- 洛谷P4126 [AHOI2009]最小割
题目:洛谷P4126 [AHOI2009]最小割 思路: 结论题 在残余网络上跑tarjan求出所有SCC,记id[u]为点u所在SCC的编号.显然有id[s]!=id[t](否则s到t有通路,能继续 ...
- shell学习(16)- 压缩和解压缩命令tar和zip
tar命令 [root@Linux ~]# tar [-cxtzjvfpPN] 文件与目录 .... 参数: -c :建立一个压缩文件的参数指令(create 的意思): -x :解开一个压缩文件的参 ...
- 【C++】STL :栈
c++stack(堆栈)是一个容器的改编,它实现了一个先进后出的数据结构(FILO) 使用该容器时需要包含#include<stack>头文件: 定义stack对象的示例代码如下: sta ...
- 04Top K算法问题
本章阐述寻找最小的k个数的反面,即寻找最大的k个数,尽管寻找最大的k个树和寻找最小的k个数,本质上是一样的.但这个寻找最大的k个数的问题的实用范围更广,因为它牵扯到了一个Top K算法问题,以及有关搜 ...