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

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. 每日算法之二十六:Substring with Concatenation of All Words

    变相的字符串匹配 给定一个字符串,然后再给定一组同样长度的单词列表,要求在字符串中查找满足下面条件的起始位置: 1)从这个位置開始包括单词列表中全部的单词.且每一个单词仅且必须出现一次. 2)在出现的 ...

  2. setprecision、fixed、showpoint的用法总结(经典!!超经典!!)【转】

    本文转载自:http://blog.csdn.net/u011321546/article/details/9293547 首先要加头文件:iomanip 一:setprecision 作用:控制输出 ...

  3. python 内存泄露的诊断

    对于一个用 python 实现的,长期运行的后台服务进程来说,如果内存持续增长,那么很可能是有了"内存泄露" 一.内存泄露的原因 对于 python 这种支持垃圾回收的语言来说,怎 ...

  4. Apache上php项目简单部署

    1.建一个简单的php项目 1)在目录C:\wamp\www中新建一个文件夹,命名为20151021 2)在文件夹20151021中新建一个index.php文件,内容为: <?php echo ...

  5. UILabel垂直方向显示(上下的顺序显示)。

    NSString* text = @"一"; NSDictionary *attribute = @{NSFontAttributeName: [UIFont systemFont ...

  6. java的封箱和拆箱

    1.基本概念 字节的单位:byte.位的单位:bit,1byte=8bit 2.8种基本数据类型 4种整型,2种浮点类型,1种用于表示Unicode编码的字符单元的字符类型和1种用于表示真值的bool ...

  7. Serializable资料整理

    1. 序列化 简单的说就是为了保存 内存中各种对象的状态(是实例变量,不是方法),并且可以把保存的对象读取出来. 虽然保存 object states的方法很多,但是Java提供了一种保存对象状态的机 ...

  8. Android 复制文本内容到系统剪贴板(自由复制)

    直接上代码:(对应的类:android.content.ClipboardManager) //获取剪贴板管理器: ClipboardManager cm = (ClipboardManager) g ...

  9. Android Studio and Gradle安装心得

    安装基于Eclipse 的ADT一段时间,感觉确实有很多功能不足,通过网上资料,决定改向AS. AS下载了最新的2.3版本,它不分64位与32位,网上说有单独版是瞎扯蛋.只要启动不同的EXE就行了. ...

  10. ArcGIS API For Android Errors汇总

    API客户端异常错误的发生通常是由于不正确的方法参数,对象状态依赖,或网络条件. //*******推荐使用方法,按下Ctrl+F搜索错误代码,再查看与代码对应的解释.********// ArcGI ...