关于使用element中的popup问题
高产似母猪。。写完上篇看了几集新番就空虚了。。零点时分决定爬起来,趁着清明假期能写多写点。
1.前言
我们知道弹出框都是在触发了某种条件后展示,而一个个的新的弹出框的展示,总是覆盖着上一个弹出框。实现覆盖功能需要保证新的弹出框的z-index要比旧的弹出框的z-index值相等或着更高,为达到这个目的element为所有的弹出框(所有下拉框、提示框、Dialog对话框等等)直接或间接的使用到一个js组件element-ui/src/utils/vue-popper
,而这个vue-popper又使用了另一个组件element-ui/src/utils/popup/popup-manager.js
。
PopupManager
PopupManager中有一个zIndex属性初始值为2000,所有的弹出框的z-index其实都是从这个PopupManager.zIndex中获取的,当要展示一个新的弹出框时,组件便会去获取最新的PopupManager.zIndex,然后为PopupManager.zIndex加1,这样就保证了新的弹出框总是比旧的弹出框z-index大,省去自己一个个设置的麻烦,也减少问题的出现。
2.遇到的问题
element本身的弹出框没有什么问题,问题在于我们擅自使用了element未直接暴露出来的组件,这里以el-select中的select-dropdown.vue为例。
我们通过拷贝el-select源码来定制下拉框的内容和逻辑,一切看起来都很完美,但是有一个致命的问题,自己定制的选择器的下拉框总是会出现时不时无法展示的问题,要疯狂点击才会展示。排查后发现就是z-index的值问题,自定义的下拉框的z-index总是无法跟原生的弹出框z-index同步,原因其实很简单。。。使用的不是同一个PopupManager
原来我们直接复制el-select源码,源码中引入下拉框import ElSelectMenu from './select-dropdown.vue'
我们修改为import ElSelectMenu from 'element-ui/packages/select/src/select-dropdown.vue'
再来看select-dropdown.vue源码中对于vue-popper的引用import Popper from 'element-ui/src/utils/vue-popper'
没毛病,但是其实毛病就出在这引用路径上的src,src就是source源的意思,源码中互相引用没问题,但是我们在项目中使用element组件的使用,并不是来自源码,而是来自源码编译出来的依赖库,是npm模块中lib目录下的文件。所以我们的自定义组件用了一个新的PopupManager对象跟原生element组件不同的PopupManager,导致zIndex不同步,展示错误。
3.解决
复制select-dropdown.vue,将原先import Popper from 'element-ui/src/utils/vue-popper'
修改为import Popper from 'element-ui/lib/utils/vue-popper'
el-select改引用为我们修改后的select-dropdown.vue。。。
4.最后
- 1.es6中import的每个模块都是单例的,同一个对象被所有引用共用
- 2.引用element中未暴露的组件时,要注意尽量使用lib下的,防止出现类似问题
- 3.引用npm包的某个文件时时,要注意引用其源码和编译后库的区别
原文地址:https://segmentfault.com/a/1190000014215259
关于使用element中的popup问题的更多相关文章
- ExtJS学习--------Ext.Element中的经常使用事件和其它重要的方法学习(实例)
经常使用事件: 其它重要方法: 详细实例:(实例结果能够将相应的代码取消凝视进行測试) Ext.onReady(function(){ Ext.create('Ext.panel.Panel',{ t ...
- element中的分页
在template <template> <div class="Terminal" v-loading="loading"> < ...
- js实现element中可清空的输入框(2)
接着上一篇的:js实现element中可清空的输入框(1)继续优化,感兴趣的可以去看看哟,直通车链接:https://www.cnblogs.com/qcq0703/p/14450001.html 实 ...
- Element中Tree树结构组件中实现Ctrl和Shift多选
在Element中的树结构中, 实现多选功能,首先的是判断有没有按下键盘ctrl和shift按键.但是在Element中的tree组件的左键点击事件是没有提供$event鼠标属性判断的.所以就需要在函 ...
- 基于vue2.0前端组件库element中 el-form表单 自定义验证填坑
eleme写的基于vue2.0的前端组件库: http://element.eleme.io 我在平时使用过程中,遇到的问题. 自定义表单验证出坑: 1: validate/resetFields 未 ...
- 你知道element中el-table的列名中不能含有" . "吗?
[本文出自天外归云的博客园] Vue+element比较流行,但是element有个坑,就是element的表格列名中不能含有点儿" . ",否则数据都显示不出来. 在elemen ...
- element中文件上传
vue+element 文件操作 作者:一粒尘土 时间:2019-3-17 注:以下操作针对 vue-cli 目录 使用 组件常用参数 组件常用方法 上传文件 上传文件格式限制 回显文件 下载文件 删 ...
- SAP 中的popup dialog (弹出对话框) 常见实现方法
方法1: FM:POPUP_TO_CONFIRM(标准对话弹出消息) 有三个button:YES-NO-CANL,可进行对应的逻辑推断 可设定标题,描写叙述问题,不方便对文本进行换行等排版,不能改 ...
- iview和element中日期选择器快捷选项的定制控件
公司的两个vue项目中都用到了iview和element这个框架,最近的两个需求都有关于日期选择的定制控件,就是要求日期选择的快捷选项左边栏有包含今日.昨日.本周.上周.最近一周.本月.上月.上季 ...
随机推荐
- linux 搭建https server (apache)
一. 安装准备 1. 安装Openssl 要使Apache支持SSL,须要首先安装Openssl支持.这里使用的是openssl-0.9.8k.tar.gz 下载Openssl:htt ...
- HDU1698 Just a Hook 【线段树】+【成段更新】+【lazy标记】
Just a Hook Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Tota ...
- Spring源代码解析和配置文件载入
Spring类的继承结构图: Spring运用了大量的模板方法模式和策略模式,所以各位看源代码的时候,务必留意,每个继承的层次都有不同的作用.然后将同样的地方抽取出来,依赖抽象将不同的处理依照不同的策 ...
- 《Qt on Android核心编程》前言:为什么写作本书
2008年.我開始在CSDN写技术博客. 在此之前,我的理想是写出受人待见的小说来.我也以前在网络论坛上笔耕不辍获得一些成绩,也以前发表过一些散文以及小说.而那一年,当我再次拾起笔来写东西时.却选择了 ...
- WCF学习笔记——不支持内容类型 text/xml; charset=utf-8
我在使用WCF的时候,客户端运行报错: 不支持内容类型 text/xml; charset=utf-8 原因是WCF服务做了修改.刷新客户端的服务引用,问题消失 =================== ...
- 解析HTTP协议六种请求方法
标准Http协议支持六种请求方法,即: 1,GET 2,HEAD 3,PUT 4,DELETE 5,POST 6,OPTIONS 但其实我们大部分情况下只用到了GET和POST.如果想设计一个符合RE ...
- THRDTERM-----干净地结束一个线程
THRDTERM产生两个线程.周期性地检查一个event对象.以决定要不要结束自己. #define WIN32_LEAN_AND_MEAN #include<stdio.h> #incl ...
- UESTC--1251--谕神的密码(贪心)
谕神的密码 Time Limit: 1000MS Memory Limit: 65535KB 64bit IO Format: %lld & %llu Submit Status ...
- Java-JDK:JDK百科
ylbtech-Java-JDK:JDK百科 JDK是 Java 语言的软件开发工具包,主要用于移动设备.嵌入式设备上的java应用程序.JDK是整个java开发的核心,它包含了JAVA的运行环境(J ...
- CodeForces A. Meeting of Old Friends
2019-05-30 20:19:57 加油!!! sort(a + 1, a + 5); 卡了一会儿 #include <bits/stdc++.h> using namespace s ...