el-date-picker组件错位（溢出浏览器）解决

1、问题

弹出框中使用el-date-picker组件，出现下图情况，小屏幕下（1366×768），时间弹窗超出页面，滚轮到底仍然有部分无法点击。（不可能让用户Ctrl+滚轮）

2、过程

本着”世界上最好的语言是'copy' "的原则，先网上查阅网友解决方案，无果。

本项目采用vue3+ElementPlus，考虑到版本问题，查看官网，ElementUI中是实时滚动修改组件高度（定位时，top值），超过一定高度后，更改组件和input的位置关系；而ElementPlus中不会实时修改，只会一下子更改方位和高度；

多方无果，只好自己解决。

f12调试模式下，滚轮滚动，以下元素的的值实时变化，（不知哪个环节出了问题，用的是ElementPlus，效果却是ElementUI的）

<div aria-hidden="false" class="el-picker__popper el-popper is-light is-pure" id="el-popper-1892" role="tooltip" style="z-index: 2018; position: absolute; left: 88px; top: 239px; margin: 0px;" data-popper-placement="bottom">
...
</div>

显然，这是插件监听滚轮事件，实时修改dom.style.top的值，只修改css样式肯定行不通。

插件源码在node_modules/element-plus/lib/el-date-picker里，在这里修改的话重新下载依赖会冲掉，放在静态资源文件夹下修改再导入也是吃力不讨好。（我会承认我看不懂源码吗？）

3、方案

这里图方便，固定dialog高度，修改定位高度（默认top="15vh"），干掉滚动条，则不会实时触发el-date-picker组件高度变化。（若内容较多一定要滚动条，下面事件就要监听滚动事件，在其中触发）

在时间input中绑定事件，@focus="datePosition"；

我获取节点使用第一个类名（.el-picker__popper）直接成功了，若冲突，则需要修改选择器。

我这里组件固定个数，若不然，请遍历。

datePosition() {setTimeout(() => {let pickerDom = document.querySelectorAll(".el-picker__popper");pickerDom[0].style.top="";pickerDom[0].style.bottom=0;pickerDom[1].style.top="";pickerDom[1].style.bottom=0;}, 0);
},

时间组件mounted时就已挂载，是只是隐藏/显示，并非重新渲染，但每次显示时会重设组件高度，所以要在这里触发datePosition方法以覆盖样式。

@click不生效，所以用的@focus。

setTimeout本不需要，但这里focus会触发2次，会出现闪烁现象。

本来正常模态窗尺寸自适应，本项目也是height=100%，却出现尺寸异常，可能某处margin导致的，而改到这儿，关闭（取消/确认）时间组件的瞬间，会短暂出现上下和左右的滚动条

.el-overlay {overflow: hidden;
}

然鹅，点击时间还是会出现以下情况，即点击时还是会触发自适应高度

el-date-picker组件错位（溢出浏览器）解决相关推荐

asp.net使用My97 Date Picker时设置默认起始时间为n年之前的今天
可以使用My97 Date Picker组件来收集用户输入的日期值. 首先下载该组件:http://www.my97.net/dp/index.asp放到自己的项目中. 然后在项目里面引用js和css ...
HTML文本错位,DIV+CSS网页错位诊断和解决方法
你地DIV+CSS网页错位的概念是否了解,这里和大家分享一下常见DIV+CSS网页错位问题及解决方法,希望对你的学习有所帮助. DIV+CSS网页错位诊断随着WEB2.0标准化设计理念的普及,国内很 ...
小程序——picker组件
转载:https://www.cnblogs.com/bgwhite/p/9335648.html 小程序自带的picker组件,picker一共分为三类普通选择器:mode = selector ...
自学鸿蒙应用开发（7）- Picker组件
picker 本文介绍在鸿蒙应用中Picker组件的基本用法. 增加Picker组件如下代码中46行~56行所示,在布局中增加Picker组件. <?xml version="1.0 ...
uni-app中picker组件的“取消”“完成”国际化，能变成英文
1. uni-appd的picker组件网址:https://uniapp.dcloud.net.cn/component/picker.html#%E6%99%AE%E9%80%9A%E9%80% ...
IOS学习六:Date Picker， Picker View选取器控件初步
Date Picker控件和Picker View控件其实也是算比较常用到视图. 以下根据红柚子上得几个例子: 分别从(日期选取器)Date Picker -->单部件选取器-->多部 ...
Iphone开发（七）date picker 和 picker view，较复杂的控件
holydancer原创,如需转载,请在显要位置注明: 转自holydancer的CSDN专栏,原文地址:http://blog.csdn.net/holydancer/article/details ...
微信小程序picker组件仅点击其中的内容才会触发事件
微信小程序包括picker组件在内的好多组件默认情况下只有点击其中的文字内容才可以触发相应的事件:例如下图的性别一栏,默认情况下只有点击红色区域的"男"字才能触发picker绑定的 ...
Flash不同版本的下载安装及必要的系统组件未正常运行的解决办法
在一个外包平台刷入职培训视频,类似于慕课的课程,需要安装Flash才能播放.一般推荐谷歌浏览器,值得注意的是2020年12月,谷歌浏览器将不再支持flash flash官网安装步骤在百度搜索&qu ...
堆栈溢出一般是由什么原因导致的堆栈溢出怎么解决
堆栈溢出的产生是由于过多的函数调用,导致调用堆栈无法容纳这些调用的返回地址,一般在递归中产生.堆栈溢出很可能由无限递归(Infinite recursion)产生,但也可能仅仅是过多的堆栈层级.下面小 ...

el-date-picker组件错位（溢出浏览器）解决

el-date-picker组件错位（溢出浏览器）解决相关推荐

最新文章

热门文章