Element修改弹窗类组件的层级的实现

目录
  • 前情
  • 坑位
  • Why?
  • 解决方案

前情

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修改弹窗类组件的层级的实现的文章就介绍到这了,更多相关Element 弹窗类层级内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Vue基于Element-ui实现表格弹窗组件

    Vue基于Element-ui实现表格弹窗组件

    本文实例为大家分享了Vue基于Element-ui实现表格弹窗组件的具体代码,供大家参考,具体内容如下 效果图 使用方式 acTable1 () {   this.$modalTable({     title: "表格一",     tableData: [{       date: '2016-05-02',       name: '王小虎',       address: '上海市普陀区金沙江路 1518 弄'     }, {       date: '2016-05-04'

  • Vue+Element UI实现概要小弹窗的全过程

    Vue+Element UI实现概要小弹窗的全过程

    场景:一个巡检单据有n个巡检明细,一个巡检明细有n个巡检项目. 实现效果:当鼠标移到明细行的概要图标时显示当前行的巡检项目卡片弹窗,移出弹窗时关闭弹窗 巡检单据详情 鼠标移到项目概要图标 效果实现 data里面声明的变量 // 概要弹窗 outlineDialog: false, // 当前行标准概要 standSummary: [], // 概要弹窗位置控制 outlineCard: { pageY: null, pageX: null, display: "none" } 1.弹窗

  • element-ui中dialog弹窗关闭按钮失效的解决

    如下所示: <el-dialog title="修改库存" :visible.sync="kcDialog" @close="kcDialog = false"> ... </el-dialog> 加一个@close可以是一个方法或者直接操作kcDialog为false 补充知识:webpack外部扩展,依赖前置 引入了外部js index.html <script src="https://code.jq

  • Element的Message弹窗重复弹出问题解决

    Element的Message弹窗重复弹出问题解决

    目录 一. 使用 二. 解决消息弹窗重复显示 一. 使用 在 Vue 中使用 element 的 message 组件 在 Vue 文件中使用 this.$message({ message: "提示信息", type: "success" }) 在 js 文件中使用 import ElementUI from 'element-ui'; ElementUI.Message({ message: '提示信息', type: 'warning' }); 二. 解决消息

  • vue+elementui通用弹窗的实现(新增+编辑)

    vue+elementui通用弹窗的实现(新增+编辑)

    本文主要介绍了vue+elementui通用弹窗的实现(新增+编辑),分享给大家,具体如下: 组件模板 <el-dialog :title="title" :visible.sync="dialogShow" :close-on-click-modal="false"> <div class="ym-common-dialog" :class="customClass"> <d

  • element-ui 弹窗组件封装的步骤

    封装el-dialog为一个组件 我们在使用element-ui的时候,如果一个弹窗中的内容很多,那么我们经常会把这个弹窗封装成一个组件,如下: <!-- DetailDialog.vue html --> <template> <el-dialog title="标题" :visible.sync="visible" width="720px" > <p>弹窗内容</p> </e

  • vue中使用element ui的弹窗与echarts之间的问题详解

    今天项目中有个需求,就是在页面中点击一个图标,弹出一个抽屉式的弹窗(弹窗是element UI的抽屉),弹窗里边是echarts呈现的数据,当我直接用echarts的时候,报错dom没有获取到: 这就陷入疑惑,平时都是这样获取的,怎么今天就不行了呢,搜索了很多答案之后才知道,在刚进入页面的时候抽屉是关闭的,那echarts不进行获取dom,当点击抽屉出来的时候,有个opened事件,在这个事件里边进行echarts的初始化,执行数据: <el-drawer title="分析图表"

  • Element修改弹窗类组件的层级的实现

    目录 前情 坑位 Why? 解决方案 前情 Element,一套为开发者.设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库,在项目中我们就使用了它,非常nice 坑位 在使用Element组件的时候,一切都十分顺利,但是在使用弹框类组件Popover 的时候,发现并没有效果. Why? 通过控制台查看元素后发现,其实Popover是有作用的,只是被页面上别的内容遮挡了,是因为zIndex低于页面上其它元素所致 解决方案 通过查询Element文挡后发现官方是有考虑到层级问题,需要指定一

  • 如何给element添加一个抽屉组件的方法步骤

    近来因为业务需要,对比iview和element库,发现element确实要比实习期间使用的iview强大点,尤其文档更为友好,但是iview的组件功能更多一点,比如分割线和抽屉组件 今天特意手写一个抽屉组件,方便自己使用element库,写好的组件我已经放在我的githup了, 点这里 一.实践 1.分析 一个抽屉组件的z-index必定是在当前页面之上的,在抽屉主体之外的区域还会有一层半透明的遮罩层,知道这些就很容易了 // drawer.vue <template> <div cl

  • 基于Element封装一个表格组件tableList的使用方法

    我们项目中使用的表格一般都比较类似,如果不进行封装的话,那么每个页面都可能有一些类似的代码.不仅浪费时间,而且由于开发人员不同的开发习惯.后期维护人员需要花费一点时间去看每个人的代码.所以我直接将表格做一个二次封装,只要一个人去维护这份代码即可.下面是我封装的内容 内容: 1.支持直接传入后台请求地址渲染列表,且参数修改之后自动刷新 2.支持自定义每一列的显示 3.支持根据内容自动撑开列宽 4.支持动态筛选表头 5.支持分页 6.防抖 7.列权限 ... 更多请自行尝试 以下是tableList

  • element修改form的el-input宽度,el-select宽度的方法实现

    element修改form的el-input宽度,el-select宽度的方法实现

    自从用了element-ui,确实好用,该有的组件都有,但是组件间的样式都固定好了,有时候像form表单这样,页面的input.select等宽度不一定会是一样的,可能有些长,有些短,这时候改变这些控件的宽度就有点麻烦了. 看了网上的好多文章,都没有找到解决方案,很多都说在el-input里面加width,但是效果不好,简单总结一下这个 例如我想要这种效果,把描述和邮箱都的宽度width设置长一点 首先在el-select里面增加style=“width:500px”,发现没有效果,为什么呢,因

  • React函数式组件与类组件的不同你知道吗

    React函数式组件与类组件的不同你知道吗

    目录 区别 其他区别 总结 区别 区别 函数组件 类组件 生命周期 无 有 this 无 有 state 无 有 改变state React Hooks:useState this.setState() 性能 高(不用实例化) 低(需要实例化) 其他区别 ProfilePageClass.js import React from 'react'; class ProfilePageClass extends React.Component { showMessage = () => { aler

  • 使用 React Hooks 重构类组件的示例详解

    目录 1. 管理和更新组件状态 2. 状态更新后的操作 3. 获取数据 4. 卸载组件时清理副作用 5.  防止组件重新渲染 6. Context API 7. 跨重新渲染保留值 8. 如何向父组件传递状态和方法? 9. 小结 最初,在 React 中可以使用 createClass 来创建组件,后来被类组件所取代.在 React 16.8 版本中,新增的 Hooks 功能彻底改变了我们编写 React 程序的方式,使用 Hooks 可以编写更简洁.更清晰的代码,并为创建可重用的有状态逻辑提供了

  • React函数组件和类组件的区别及说明

    目录 React函数组件和类组件区别 函数组件 类组件 区别 React函数式组件和类组件的优缺点 1.类组件的性能消耗比较大 2.函数式组件性能消耗小 React函数组件和类组件区别 定义组件有两个要求: 组件名称必须以大写字母开头 组件的返回值只能有一个根元素 函数组件 function Welcome (props) {   return <h1>Welcome {props.name}</h1> } ReactDOM.render(<Welcome name='rea

  • vue弹窗父子组件调用问题示例详解

    目录 一.vue弹窗 父子组件 emit 传图片 二.vue父组件调用子组件里的不同方法 一.vue弹窗 父子组件 emit 传图片 1.:modal-append-to-body="false"为了解决element ui中引入dialog窗口组件后遮罩层会挡住dialog窗口的用处,默认为true,改为false即可解决. 2.此弹窗主要为了解决收到下位机急停信号后,上位机前台显示弹窗的重复性. //此为子组件(customComponents.vue) <div> &

  • Element Plus的el-tree-select组件懒加载+数据回显详解

    目录 一.背景说明 二.使用 1. dom 2.methods 三.回显 总结 一.背景说明 技术:Vue3 + Element Plus 需求:在选择组织机构时以树结构下拉展示. 用到组件:TreeSelect 树形选择组件(el-tree-select) 官网文档地址: https://element-plus.gitee.io/zh-CN/component/tree-select.html https://element-plus.gitee.io/zh-CN/component/tre

  • react生命周期(类组件/函数组件)操作代码

    1.react代码模式分为两种 类组件和函数组件(生命周期也有所不同) 2.类组件(写法如下) import React from 'react' export default class App1 extends React.Component{ state = { username:'', password:'' } setUser = (event) => { this.setState({username:event.target.value}) } setPass = (event)

随机推荐