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 ...
随机推荐
- Spring Cloud Alibaba 之 Nacos
Nacos 技术讲解 一提到分布式系统就不的不提一下 CAP 原则 什么是CAP CAP原则又称CAP定理,指的是在一个分布式系统中,一致性(Consistency).可用性(Availability ...
- TCP/IP协议 | TCP协议 | UDP协议 | 三次握手四次挥手
TCP/IP协议不仅仅指的是TCP 和IP两个协议,而是指一个由FTP.SMTP.TCP.UDP.IP等协议构成的协议簇, 只是因为在TCP/IP协议中TCP协议和IP协议最具代表性,所以被称为TCP ...
- 【ASP.NET Core】MVC模型绑定:自定义InputFormatter读取CSV内容
在上一篇文章中,老周介绍了用自定义 ModelBinder 的方式实现一个 API(或MVC操作方法)可以同时支持 JSON 格式和 Form-data 格式的数据正文.今天该轮到 InputForm ...
- redux和vuex以及dva?
redux: 通过store存储,通过action唯一更改,reducer描述如何更改.dispatch一个action dva: 基于redux,结合redux-saga等中间件进行封装 vuex: ...
- Oracle :value too large for column "SCHEMA"."TABLE"."COLUMN" (actual: 519, maximum: 500)的解决方案
原因:我是使用 CREATE TABLE XXX AS subquery 进行创建的数据表,主要是将相关的数据聚合在一起,然后通过导出为SQL脚本文件,进行导入到新库中,导致部分INSERT INTO ...
- 深入理解Java虚拟机-垃圾收集算法
一.判断对象是否可进行回收 1.引用计数算法 给对象中添加一个引用计数器,每当有一个地方引用它时,计数器值就加1:当引用失效时,计数器值就减1:任何时刻计数器为0的对象就是不可能再被使用的.但是主流的 ...
- consumer 是推还是拉?
Kafka 最初考虑的问题是,customer 应该从 brokes 拉取消息还是 brokers 将消 息推送到 consumer,也就是 pull 还 push.在这方面,Kafka 遵循了一种大 ...
- Java 中的 final 关键字有哪些用法?
修饰类:表示该类不能被继承: 修饰方法:表示方法不能被重写: 修饰变量:表示变量只能一次赋值以后值不能被修改(常量).
- Linux 网卡配置参数
网卡配置文件位于 /etc/sysconfig/network-scripts/ 目录下 网卡配置文件在RHEL5/6以eth为网卡文件的前缀,在RHEL7中以ifcfg为网卡文件的前缀 配置 解释 ...
- c++中的赋值函数
在c++中,对于任意一个类Class A,如果程序员不显示的声明和定义上述函数,C++编译器将会自动的为A产生4个public inline 的默认函数,这4个函数最常见的形式为: A() //默认构 ...