高产似母猪。。写完上篇看了几集新番就空虚了。。零点时分决定爬起来,趁着清明假期能写多写点。

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问题的更多相关文章

  1. ExtJS学习--------Ext.Element中的经常使用事件和其它重要的方法学习(实例)

    经常使用事件: 其它重要方法: 详细实例:(实例结果能够将相应的代码取消凝视进行測试) Ext.onReady(function(){ Ext.create('Ext.panel.Panel',{ t ...

  2. element中的分页

    在template <template> <div class="Terminal" v-loading="loading"> < ...

  3. js实现element中可清空的输入框(2)

    接着上一篇的:js实现element中可清空的输入框(1)继续优化,感兴趣的可以去看看哟,直通车链接:https://www.cnblogs.com/qcq0703/p/14450001.html 实 ...

  4. Element中Tree树结构组件中实现Ctrl和Shift多选

    在Element中的树结构中, 实现多选功能,首先的是判断有没有按下键盘ctrl和shift按键.但是在Element中的tree组件的左键点击事件是没有提供$event鼠标属性判断的.所以就需要在函 ...

  5. 基于vue2.0前端组件库element中 el-form表单 自定义验证填坑

    eleme写的基于vue2.0的前端组件库: http://element.eleme.io 我在平时使用过程中,遇到的问题. 自定义表单验证出坑: 1: validate/resetFields 未 ...

  6. 你知道element中el-table的列名中不能含有" . "吗?

    [本文出自天外归云的博客园] Vue+element比较流行,但是element有个坑,就是element的表格列名中不能含有点儿" . ",否则数据都显示不出来. 在elemen ...

  7. element中文件上传

    vue+element 文件操作 作者:一粒尘土 时间:2019-3-17 注:以下操作针对 vue-cli 目录 使用 组件常用参数 组件常用方法 上传文件 上传文件格式限制 回显文件 下载文件 删 ...

  8. SAP 中的popup dialog (弹出对话框) 常见实现方法

      方法1: FM:POPUP_TO_CONFIRM(标准对话弹出消息) 有三个button:YES-NO-CANL,可进行对应的逻辑推断 可设定标题,描写叙述问题,不方便对文本进行换行等排版,不能改 ...

  9. iview和element中日期选择器快捷选项的定制控件

      公司的两个vue项目中都用到了iview和element这个框架,最近的两个需求都有关于日期选择的定制控件,就是要求日期选择的快捷选项左边栏有包含今日.昨日.本周.上周.最近一周.本月.上月.上季 ...

随机推荐

  1. poj 2931 Building a Space Station &lt;克鲁斯卡尔&gt;

    Building a Space Station Time Limit: 1000MS Memory Limit: 30000K Total Submissions: 5869 Accepted: 2 ...

  2. luogu3084 Photo 单调队列优化DP

    题目大意 农夫约翰决定给站在一条线上的N(1 <= N <= 200,000)头奶牛制作一张全家福照片,N头奶牛编号1到N.于是约翰拍摄了M(1 <= M <= 100,000 ...

  3. 444D

    分类 首先我们要对询问分类,如果相差log级别就第一种询问,否则第二种. 第一种直接暴力lower_bound,复杂度玄学 第二种归并,复杂度玄学 但是就是过了.感觉很容易卡. #include< ...

  4. springboot踩坑出坑记

    4月15到4月17我都在把毕设从eclipse重构到IDEA中,springboot最让我头疼的是它的版本问题,因为每一个版本对应的依赖包都有可能出错,这里分享一下如何成功移植用eclipse写的sp ...

  5. Spring Boot (20) 拦截器

    动态资源和静态资源 拦截器可以算是aop的一种实现,专门拦截对动态资源的后台请求,也就是拦截对控制层的请求,主要用于判断用户是否有权限请求后台.拦截器不会拦截静态资源,如spring boot默认静态 ...

  6. C# 多线程系列(二)

    传递数据给一个线程 通过函数或lambda表达式包一层进行传递. static void Main(string[] args) { Thread thread = new Thread(() =&g ...

  7. 一张图说明DIV盒子距离

    虚线的宽高为你实际指定的width和height 虚线外的白色区域为padding 红色区域为border的width 红色外的区域为margin

  8. Android 解析XML—pull解析方式

    在Android中,常见的XML解析器分别为SAX解析器.DOM解析器和PULL解析器,其中PULL解析器小巧轻便,解析速度快,简单易用,非常适合在Android移动设备中使用,Android系统内部 ...

  9. 查看Oracle数据库表空间大小,是否需要增加表空间的数据文件

    在数据库管理中,磁盘空间不足是DBA都会遇到的问题,问题比较常见. --1查看表空间已经使用的百分比 Sql代码 select a.tablespace_name,a.bytes/1024/1024 ...

  10. java 练习

    class Hello{ public static void main(String [] args) { System.out.println(" Hello 这是我的第一个java作品 ...