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 ...
随机推荐
- hdu5197 DZY Loves Orzing(FFT+分治)
hdu5197 DZY Loves Orzing(FFT+分治) hdu 题目描述:一个n*n的矩阵里填入1~n^2的数,要求每一排从前往后能看到a[i]个数(类似于身高阻挡视线那种),求方案数. 思 ...
- Adobe AIR 应用程序图标详细描述
官方PDF文档: http://help.adobe.com/zh_CN/air/build/WS901d38e593cd1bac1e63e3d129907d2886-8000.html#WS901d ...
- Kerberos基本原理、安装部署及用法
1. 概述 Kerberos是一种认证机制. 目的是,通过密钥系统为客户端/服务器应用程序提供强大的认证系统:保护服务器防止错误的用户使用,同时保护它的用户使用正确的服务器,即支持双向验证:Kerbe ...
- SpringDataJdbc多数据源
代码基于 SpringBoot + SpringDataJDBC + Mybatis 架构 介绍使用多数据源的关键的一些类:AbstractRoutingDataSource继承实现determine ...
- 传染病模型(SIR模型)
- WzwJDBC 自定义工具类(获取连接,释放资源)
package wzwUtil;import java.io.IOException;import java.io.InputStream;import java.sql.*;import java. ...
- 六、cadence叠层和布线前规则设置详细步骤
一.叠层设置 1.颜色设置 2.层叠设置setup-cross section,如下图: 3.布线规则设置 a>线宽设置 b>添加差分对logic-Assign Differenital ...
- 针对于iosAPP内嵌H5,-webit-overflow-scrolling:touch;产生空白情况
问题描述:一个内嵌IOSAPP的H5页面,长页面,大概1.6个屏幕高度,由于有列表滑动起来很不流畅,所以用了-webit-overflow-scrolling:touch;这个只针对ios端的物理滚动 ...
- canvas 1px 出现模糊解决方法及原理
关于canvas绘制1像素出现模糊的原因及解决方法 canvas是html5中非常强大的功能,但是在绘制的时候如果出现1像素,例如画一条1像素的线可能出现模糊情况. 一.解决方法 网上比较常见的解决方 ...
- 【Android开发】控件外边框自定义
1.在drawable里面新建自定义的资源文件shape <?xml version="1.0" encoding="utf-8"?> <sh ...