Element修改弹窗类组件的层级
前情
Element,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库,在项目中我们就使用了它,非常nice
坑位
在使用Element组件的时候,一切都十分顺利,但是在使用弹框类组件Popover 的时候,发现并没有效果。
Why?
通过控制台查看元素后发现,其实Popover是有作用的,只是被页面上别的内容遮挡了,是因为zIndex低于页面上其它元素所致
解决方案
通过查询Element文挡后发现官方是有考虑到层级问题,需要指定一个初始层级,后面的弹框类组件的层级会累加+1,这样就保证后面触发的层级始终高于前面的组件。
Element初始化时重置层级
Element组件使用有二种方式,对于不同的使用方式解决方式不同。
完整引入 Element:
import Vue from 'vue';
import Element from 'element-ui';
Vue.use(Element, { size: 'small', zIndex: 3000 });
按需引入Element:
import Vue from 'vue';
import { Button } from 'element-ui';
Vue.prototype.$ELEMENT = { size: 'small', zIndex: 3000 };
Vue.use(Button);
官方文挡-全局配置项:https://element.eleme.cn/#/zh-CN/component/quickstart
如果Element已经初始化且已使用过弹框类组件
这种情况下通过修改Vue.prototype.$ELEMENT已经没有效果了,因为它已经被使用过,这时需要手动修改,后面弹窗的组件会在此值的基础上累加,代码如下:
import PopupManager from "element-ui/lib/utils/popup/popup-manager";
PopupManager.zIndex = 30000;
Element修改弹窗类组件的层级的更多相关文章
- react.js插件开发,x-dailog弹窗浮层组件
react.js插件开发,x-dailog弹窗浮层组件 我认为,每一个组件都应该有他自带的样式和属性事件回调配置.所以我会给x-dialog默认一套简单的样式,和各种默认的配置项.所有react插件示 ...
- 浅谈Supermap iClient for JavaScript 弹窗类
地图作为信息的载体和呈现方式,是GIS的重要组成部分,它是一个浏览信息的窗口,在信息日益发达的今天 ,各种地图应用如雨后春笋一般出现在大众眼前,而不是像以往一样太过局限于专业的领域.而弹窗,是作为地图 ...
- React - 组件:类组件
目录: 1. 类组件有自己的状态 2. 继承React.Component-会有生命周期和this 3. 内部需要一个render函数(类组件会默认调用render方法,但不会默认添加,需要手动填写r ...
- vue-property-decorator和typescript结合构建的class类组件,父组件触发子组件方法的方式
vue-property-decorator和typescript结合构建的class类组件,父组件触发子组件方法的方式 class类组件示例 Father类组件 <template> & ...
- Flutter 布局类组件:简介
前言 布局类组件都会包含一个或多个子组件,不同的布局类组件对子组件排版(layout)方式不同. 我们知道,Element树才是最终的绘制树,Element树是通过Widget树来创建的(通过Widg ...
- React函数类组件及其Hooks学习
目录 函数类组件 函数式组件和类式组件的区别: 为什么要使用函数式组件? Hooks概念及常用的Hooks 1. useState: State的Hook 语法 useState()说明: setXx ...
- Element中Tree树结构组件中实现Ctrl和Shift多选
在Element中的树结构中, 实现多选功能,首先的是判断有没有按下键盘ctrl和shift按键.但是在Element中的tree组件的左键点击事件是没有提供$event鼠标属性判断的.所以就需要在函 ...
- waxpatch修改任意类的用法
例如:修改一个UIView(PJView)的子类和一个NSObject(PJModel)类,则需要在patch.lua文件中声明这两个要修改的类 并且建立这些待修改的类的对应的.lua文件 对应的.l ...
- 动态修改Python类和实例的方法(转)
相信很多朋友在编程的时候都会想修改一下已经写好的程序行为代码,而最常见的方式就是通过子类来重写父类的一些不满足需求的方法.比如说下面这个例子. class Dog: def bark(self): p ...
随机推荐
- MySQL SQL Injection Cheat Sheet
MySQL SQL Injection Cheat Sheet Some useful syntax reminders for SQL Injection into MySQL databases- ...
- Spring ---Spring专题(一)
1. Spring简介 1.1 什么是Spring spring是分层的java SE/EE应用full-stack(全栈)轻量级开源框架,以IOC(Inverse Of Control:反转控制)和 ...
- kafka中的broker 是干什么的?
broker 是消息的代理,Producers往Brokers里面的指定Topic中写消息,Consumers从Brokers里面拉取指定Topic的消息,然后进行业务处理,broker在中间起到一 ...
- CKEditor禁用浏览服务器的功能
在CKeditor的config.js文件中,添加以下内容,重启服务器,图片.flash.video中的浏览服务器按钮就会消失掉 /*按下" 浏览服务器"按钮时应启动的外部文件管理 ...
- elasticsearch 了解多少,说说你们公司 es 的集群架构,索 引数据大小,分片有多少,以及一些调优手段 。
面试官:想了解应聘者之前公司接触的 ES 使用场景.规模,有没有做过比较大 规模的索引设计.规划.调优. 解答: 如实结合自己的实践场景回答即可. 比如:ES 集群架构 13 个节点,索引根据通道不同 ...
- chubby 是什么,和 zookeeper 比你怎么看?
chubby 是 google 的,完全实现 paxos 算法,不开源.zookeeper 是 chubby的开源实现,使用 zab 协议,paxos 算法的变种.
- 如何从https://developer.mozilla.org上查询对象的属性、方法、事件使用说明和示例
在https://developer.mozilla.org搜索要在前面加上指令 搜索之后点进去 进入之后就是这样的 在页面左边你可以选择自己要查询的对象 里面就是会有属性.方法.事件使用说明和示例.
- 学习GlusterFS(八)
GlusterFS集群创建 一.简介 GlusterFS概述 Glusterfs是一个开源的分布式文件系统,是Scale存储的核心,能够处理千数量级的客户端.在传统的解决 方案中Glusterfs能够 ...
- 学习GlusterFS(一)
一.概述 1.GlusterFS是集群式NAS存储系统,分布式文件系统(POSIX兼容),Tcp/Ip方式互联的一个并行的网络文件系统,通过原生 GlusterFS 协议访问数据,也可以通过 NFS/ ...
- Python学习--21天Python基础学习之旅(Day08-Day21)
Day08: Chapter 11 异常 1.1如果try代码块中代码运行没有问题,则运行时跳过except代码块.(有异常时执行except中的代码,没有异常则跳过except中的代码) try-e ...