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.hqwc.cn/news/88196.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

什么是synchronized的重量级锁

今天我们继续学习synchronized的升级过程,目前只剩下最后一步了:轻量级锁->重量级锁。 通过今天的内容,希望能帮助大家解答synchronized都问啥?中除锁粗化,锁消除以及Java 8对synchronized的优化外全部的问题。 获…

云计算——虚拟化中的网络架构与虚拟网络(文末送书)

作者简介:一名云计算网络运维人员、每天分享网络与运维的技术与干货。 公众号:网络豆 座右铭:低头赶路,敬事如仪 个人主页: 网络豆的主页​​​​​ 目录 前期回顾 前言 一.网卡虚拟化 1.网卡虚拟化方法&…

海康威视相机-LINUX SDK 开发

硬件与环境 相机: MV-CS020-10GC 系统:UBUNTU 22.04 语言:C 工具:cmake 海康官网下载SDK 运行下面的命令进行安装 sudo dpkg -i MVSXXX.deb安装完成后从在/opt/MVS 路径下就有了相关的库,实际上我们开发的时候只需要…

CausalEGM:通过编码生成建模的通用因果推理框架

英文题目:CausalEGM: a general causal inference framework by encoding generative modeling 中文题目:CausalEGM:通过编码生成建模的通用因果推理框架 单位:斯坦福大学统计系 时间:2023 论文链接:ht…

ceph对象三元素data、xattr、omap

这里有一个ceph的原则,就是所有存储的不管是块设备、对象存储、文件存储最后都转化成了底层的对象object,这个object包含3个元素data,xattr,omap。data是保存对象的数据,xattr是保存对象的扩展属性,每个对象…

java+ssm+mysql农场信息管理系统

项目介绍: 本系统为基于jspssmmysql的农场信息管理系统,功能如下: 用户:注册登录系统,菜地信息管理,农作物信息管理,种植信息管理,客户信息管理,商家信息管理&#xff…

BingChat与ChatGPT比较,哪个聊天机器人能让你获益更多?

人工智能领域的最新进展为普通人创造新的收入来源提供了更多机会。今年早些时候,微软对OpenAI进行了大量投资。此后,微软在Microsoft Edge浏览器中推出了自家的聊天机器人Bing Chat。 在论坛和社交媒体上,你可以发现这两个AI工具都吸引了很…

Property ‘sqlSessionFactory‘ or ‘sqlSessionTemplate‘ are required

项目场景: 最近因为公司业务需要在搭一个新架构,用的springboot3和jdk17,在整合mybatis多数据源的时候报错 (引用的mybatisplus 和 mybatisplusjion的是最新的包-2023-08-26) Error creating bean with name ‘XXXServiceImpl’:…

[已解决] wget命令出现Unable to establish SSL connection.错误

问题 从win11上下载best.ckpt包时 遇到: Unable to establish SSL connection.错误 解决方案: 加上参数: 加上跳过验证证书的参数--no-check-certificate 有些网站不允许通过非浏览器的方式进行下载,使用代理既可以解决问题&am…

【C++入门】模版初阶(泛型编程)

目录 1.泛型编程2.函数模版2.1函数模版的概念2.2函数模版的使用2.3函数模版的原理2.4函数模版的实例化2.5 模板参数的匹配原则 3.类模版3.1类模版的定义格式3.2类模版的实例化 1.泛型编程 让我们思考一个小问题:如何实现一个通用的交换函数呢? 在解决这…

构建个人博客_Obsidian_github.io_hexo

1 初衷 很早就开始分享文档,以技术类的为主,一开始是 MSN,博客,随着平台的更替,后来又用了 CSDN,知乎,简书…… 再后来是 Obsidian,飞书,Notion,常常有以下困…

ElasticSearch基础知识汇总

文章目录 前言一、认识ElasticSearch1.正向索引和倒排索引2. MySql与ElasticSearc3.IK分词器 二、ES索引库操作1.mapping映射属性2.索引库的CRUD 三、ES文档库操作 前言 Elasticsearch是一个基于Lucene的搜索服务器。它提供了一个分布式多用户能力的全文搜索引擎,基…