关于Element中popup的z-index问题

更新时间:2023-06-20 23:54:41 阅读: 评论:0

韩惠民关于Element中popup的z-index问题
居住证明怎么开1.前⾔
我们知道Element中新的弹出框的展⽰,总是覆盖着上⼀个弹出框。实现覆盖功能需要保证新的弹出框的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中获取的,当要展⽰⼀个新的弹出框时,
组件便会通过 ZIndex()  获取最新的PopupManager.zIndex,nextZIndex返回PopupManager.zIndex++,这样就保证了新的弹出框总是⽐旧的弹出框z-index⼤,
果蔬保鲜剂省去⾃⼰⼀个个设置的⿇烦,也减少问题的出现。
2.遇到的问题上海财经大学排名
使⽤原⽣element组件弹窗没什么问题,但是因为项⽬中需要改动⽇期组件的,所以复制了⼀份element⽇期组件源码做改动。
按照项⽬要求的逻辑改完,在项⽬中运⾏⼀切正常,但是后⾯有客户提出弹窗中⽇期选择⾯板被覆盖的问题,需要点击很多次才会正常展⽰,通过调试发现⽇期组件的z-index 和其他弹窗的z-index 是分开计数的,所以其他弹窗的z-index⼤于⽇期组件的z-index,就会出现被覆盖的问题,这只能说明⽇期和其他组件获取z-index的不是同⼀个PopupManager
查看了先data-picker下的picker.vue其中引⽤vue-popper怎样给u盘加密
import Popper from 'element-ui/lib/utils/vue-popper';
没⽑病,但是其实⽑病就出在这引⽤路径上的src,src就是source源的意思,源码中互相引⽤没问题,但是我们在项⽬中使⽤element组件的使⽤,并不是来⾃源码,⽽是来⾃源码编译出来的依赖库,是npm模块中lib⽬录下的⽂件。所以我们的⾃定义组件⽤了⼀个新的PopupManager对象跟原⽣element组件不同的PopupManager,导致zIndex不同步,展⽰错误。
3.解决
海廷加
修改picker.vue,将原先
import Popper from 'element-ui/src/utils/vue-popper'
修改为
幸福无处不在import Popper from 'element-ui/lib/utils/vue-popper'

本文发布于:2023-06-20 23:54:41,感谢您对本站的认可!

本文链接:https://www.wtabcd.cn/fanwen/fan/82/1001926.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

标签:组件   问题   需要   覆盖   源码   弹窗   弹出
相关文章
留言与评论(共有 0 条评论)
   
验证码:
推荐文章
排行榜
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图