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

news2024/10/7 2:25:13

监听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.coloradmin.cn/o/939552.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Stone Prover:StarkWare的STARK Prover

1. 引言 StarkWare将基于Apache 2.0 license,开源其以C编写的STARK Prover,名为Stone(STARK one)。 其基本流程为: 1)编写Cairo0程序。2)使用Cairo工具 将Cairo0程序编译为CASM。3&#xff…

数据结构:八种数据结构大全

数据结构 1.1 数据结构概述 数据结构是计算机存储、组织数据的方式;通常情况下,精心选择的数据结构可以带来更高的运行或者存储效率。数据结构的优良将直接影响着我们程序的性能;常用的数据结构有:数组(Array&#xff…

K8S Nginx Ingress实现金丝雀发布

通过给 Ingress 资源指定 Nginx Ingress 所支持的 annotation 可实现金丝雀发布。 需给服务创建2个 Ingress,其中1个常规 Ingress,另1个为带 nginx.ingress.kubernetes.io/canary: "true" 固定的 annotation 的 Ingress,称为 Cana…

浅谈Lua协程和函数的尾调用

前言 虽然不经常用到协程,但是也不能谈虎色变。同时,在有些场景,协程会起到一种不可比拟的作用。所以,了解它,对于一些功能,也会有独特的思路和想法。 协程 概念 关于进程和线程的概念就不多说。 那么…

这所985专业课均分130!复试笔试很难!淘汰率很高!

一、学校及专业介绍 东南大学坐落于六朝古都南京,是享誉海内外的著名高等学府。学校是国家教育部直属并与江苏省共建的全国重点大学,是国家“双一流”、“985工程”、“211工程”重点建设高校。2017年,东南大学入选世界一流大学建设名单。 …

字符集(Latin1,GBK,utf8,utf8mb4)

Latin1 1个字符占一个字节GBK 1个字符占两个字节utf8utfmb3 1个字节占三个字节utf8mb4 1个字符占四个字节

OLED透明屏高清:什么是OLED透明屏?未来显示技术的巅峰之作

在现代科技快速发展的时代,高清显示已经成为人们对于视觉体验的基本要求。 而OLED透明屏作为一种先进的显示技术,以其出色的高清显示效果和透明度,正逐渐成为未来显示技术的巅峰之作。 一、什么是OLED透明屏 OLED透明屏采用有机发光二极管技…

Zabbix下载安装及SNMP Get使用

帮助文档:6. Zabbix Appliance 一、zabbix下载安装 1、获取Zabbix Appliance镜像 Download Zabbix appliance 2、使用该镜像创建虚拟机 3、打开虚拟机控制台自动安装,等待安装完成即可 默认配置 系统/数据库:root:zabbix Zabbix 前端&am…

javacv基础01-HelloWorld

JavaCV是一个针对Java编程语言的开源计算机视觉和机器学习库。它为各种流行的计算机视觉和图像处理库(如OpenCV、FFmpeg等)提供了Java包装,使Java开发人员能够在其Java应用程序中访问这些库的功能,无需编写本地代码。 JavaCV提供…

SpringBoot Mybatis 多数据源 MySQL+Oracle

一、背景 在SpringBoot Mybatis 项目中&#xff0c;需要连接 多个数据源&#xff0c;连接多个数据库&#xff0c;需要连接一个MySQL数据库和一个Oracle数据库 二、依赖 pom.xml <dependencies><dependency><groupId>org.springframework.boot</groupId&…

(Deep Learning)准确率和召回率的基础概念

算法模型极大的提升了对各类结果的预测效率。 【算法模型的本质】 算法模型的本质&#xff0c;是基于输入的各类变量因子&#xff0c;通过计算规则&#xff08;模型or公式&#xff09;&#xff0c;得出预测结果。 典型的预测结果比如&#xff1a; 1.&#xff08;通过历史行为…

天地图开发指南

1、 申请天地图key 1.1注册账号 注册地址&#xff1a;https://uums.tianditu.gov.cn/register 1.2 申请开发者 登录后 &#xff0c;申请开发者https://console.tianditu.gov.cn/api/register 1.3 创建应用 点击控制台&#xff0c;创建应用 1.4 天地图key 2、天地图api使用 2.…

如何开发一款飞机聊天app?即时通讯系统

随着航空业的快速发展&#xff0c;飞机旅行已经成为人们生活中常见的一部分。而在飞行期间&#xff0c;人们往往希望能够与其他乘客进行交流&#xff0c;分享旅行经历或者寻找旅途中的伴侣。为了满足这一需求&#xff0c;开发一款专门用于飞机上的聊天应用程序成为了一个有意的…

个人博客系统——SSM框架

项目特点&#xff1a; 1.使用手工加盐算法代替明文&#xff0c;提高用户隐私安全性 2.登录功能的验证使用了拦截器 3.支持分布式 Session存储和缓存都放到了Redis里面 具体实现步骤 1.创建一个SSM项目 ​​​​​​​ 2.准备项目 先删除项目中无用的文件和目录 引入前端…

项目进度管理:项目经理做了无用功,如何解决?

李思是一个职场新人&#xff0c;项目经理分配了一个简单的任务给她&#xff0c;完成一份关于竞品功能的调查报告&#xff0c;以便为公司的产品提供参考。 李思第二天回复称进展顺利&#xff0c;预计两天时间能完成。 然而&#xff0c;当项目经理收到厚厚的调研报告时&#x…

Gitlab创建一个空项目

1. 创建项目 Project slug是访问地址的后缀&#xff0c;跟前边的ProjectUrl拼在一起&#xff0c;就是此项目的首页地址&#xff1b; Visibility Level选择默认私有即可&#xff0c;选择内部或者公开&#xff0c;就会暴露代码。 勾选Readme选项&#xff0c;这样项目内默认会带…

怎么看待目前的游戏市场格局,看好哪儿家公司?

近三十年来&#xff0c;中国游戏砥砺前行经过近四十年的发展&#xff0c;将计算机技术、互动媒体技术、艺术设计、经济系统、商业模式等进行了充分融合应用&#xff0c;作为 “ 第九艺术 ” 已经成为文化产业 的重要支柱&#xff0c;其硬件和软件创新也不断改变着人们的娱乐消费…

小研究 - 多租户Java虚拟机的设计与实现(二)

多租户技术&#xff0c;让一个软件实例同时服务于不同的组织&#xff0c;在云计算环境中被广泛运用&#xff0c;极大的节约了基础设施资源。但是&#xff0c;云计算环境中使用最广的Java语言却没有提供相应的多租户功能。为此&#xff0c;云服务提供商不得不对自己的应用服务器…

arcgis的MapServer服务查询出来的结果geometry坐标点带*的问题

不知道小伙伴使用arcgis server服务做查询的时候&#xff0c;有没有遇到下面的问题 原因是查询结果中出现*字符 这个问题一直困扰了我很久&#xff1a;因为从数据库查询的坐标点是没有问题的。 一开始有同事遇到过&#xff0c;说重新插入下就好了&#xff0c;有时候确实能解决…

Qt-creater 在线安装太慢,换国内源

Qt 在线安装太慢,换国内源 下载安装包 实例使用清华源 如下图先下载安装包exe文件 url: 链接: https://mirrors.tuna.tsinghua.edu.cn/qt/official_releases/online_installers/ 下载安装包到本地目录D:\ Powershell进入本地目录D:\ 使用参数方式换国内清华源 换国内清华源 …