当前位置: 首页 > news >正文

ant-vue1.78版监听a-modal遮罩层的滚动事件

监听a-modal遮罩层的滚动事件

我们开发过程中经常有遇到监听页面滚动的事件需求,去做一些下拉加载或者是下拉分页的需求,我们直接在vue的生命周期中去绑定事件监听非常的方便,但如果是弹框的遮罩层的滚动监听呢?页面的监听完全是不起作用的,我们需要怎么办?看看我的场景
在这里插入图片描述

我们可以看到弹框过大,右侧已经出现了滚动条,然后左边的下拉框由于随着遮罩层滚动条的滚动,下拉项的列表脱离了原有的位置,就很丑,没有跟随下拉菜单移动,这也许是ant的缺陷,这个时候我们需要监听遮罩层的滚动,及时的让下拉菜单失焦就可以解决这个问题,由于页面加载时弹框是没有出现的,明显是没有遮罩层的我们监听不到,监听时机很重要,上代码

watch: {//我们监听弹框的开关visible(nVal) {if (nVal) {//打开弹框时,在$nextTick里拿到遮罩层的dom,然后监听滚动事件this.$nextTick(() => {this.oDiv = document.getElementsByClassName('ant-modal-wrap ')[0];this.oDiv.addEventListener('scroll', this.handleScroll);});}},},methods: {//解决弹框滚动时,下拉菜单飘移的问题handleScroll() {//通过短路与兼容语法 主动让表单失焦this.$refs.selectcompany && this.$refs.selectcompany.blur();this.$refs.selectAttr && this.$refs.selectAttr.blur();},}
http://www.lryc.cn/news/152563.html

相关文章:

  • MATLAB中residue函数用法
  • 攻防世界-Caesar
  • 嵌入式开发-lin总线介绍 一.概述
  • 羊城杯-2023-Crypto
  • RabbitMQ快速上手及讲解
  • 使用多线程std::thread发挥多核计算优势(解答)
  • MySQL分页查询详解:优化大数据集的LIMIT和OFFSET
  • 解构赋值、函数默认值
  • 【已解决】Mybatis 实现 Group By 动态分组查询
  • Android修改默认gradle路径
  • 原生JS+canvas实现炫酷背景
  • Linux学习之NAS服务器搭建
  • 分享码云上8个宝藏又有价值的开源图片编辑器
  • TCP Header都有啥?
  • 无涯教程-Android - AutoCompleteTextView函数
  • 【Docker】 07-安装ElasticSearch、Kibana
  • 【数据结构篇】线性表1 --- 顺序表、链表 (万字详解!!)
  • C语言每日一练--Day(17)
  • 8月琐碎但值得的事情
  • 苹果Mac系统如何优化流畅的运行?提高运行速度
  • Python 类和对象
  • VC++使用Microsoft Speech SDK进行文字TTS朗读
  • FFmpeg4.3.1+h264在windows下编译与VS2017项目集成
  • mapboxGL3新特性介绍
  • 类ChatGPT大模型LLaMA及其微调模型
  • 50个简洁的提示提高代码可读性和效率(0-10)
  • Linux —— 进程信号
  • Android笔记 自定义控件时drawText字符串宽度的3种计算方式
  • ChatRWKV 学习笔记和使用指南
  • Particle Life粒子生命演化的MATLAB模拟