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.mfbz.cn/a/95134.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

学习pytorch6 torchvision中的数据集使用

torchvision中的数据集使用 1. torchvision中的数据集使用官网文档注意点1 totensor实例化不要忘记加括号注意点2 download可以一直保持为True代码执行结果 2. DataLoader的使用 1. torchvision中的数据集使用 官网文档 注意左上角的版本 https://pytorch.org/vision/0.9/ 注…

【业务功能篇81】微服务SpringCloud-ElasticSearch-Kibanan-docke安装-入门实战

ElasticSearch 一、ElasticSearch概述 1.ElasticSearch介绍 ES 是一个开源的高扩展的分布式全文搜索引擎,是整个Elastic Stack技术栈的核心。它可以近乎实时的存储,检索数据;本身扩展性很好,可以扩展到上百台服务器,…

【漏洞复现】万户协同办公平台未授权访问漏洞

漏洞描述 万户ezOFFICE协同管理平台涵盖门户自定义平台、信息知识平台管理、系统管理平台功能,它以工作流引擎为底层服务,以通讯沟通平台为交流手段,以门户自定义平台为信息推送显示平台,为用户提供集成的协同工作环境。该平台存…

软件测试面试题及答案,2023秋招必看版

导读 精选400道软件测试面试真题,高清打印版打包带走,横扫软件测试面试高频问题,涵盖测试理论、Linux、MySQL、Web测试、接口测试、APP测试、Python、Selenium、性能测试、LordRunner、计算机网络、数据结构与算法、逻辑思维、人力资源等模块…

【方案】基于AI边缘计算的智慧工地解决方案

一、方案背景 在工程项目管理中,工程施工现场涉及面广,多种元素交叉,状况较为复杂,如人员出入、机械运行、物料运输等。特别是传统的现场管理模式依赖于管理人员的现场巡查。当发现安全风险时,需要提前报告&#xff0…

python VTK PyQt5 VTK环境搭建 创建 渲染窗口及三维模型,包含 三维模型交互;

目录 Part1. VTK 介绍 Part2. PyQt5 VTK环境搭建 安装Anaconda 自带Python Anaconda下载 安装PyQt5 安装 VTK Part3 :PyQt VTK 结合样例: Part1. VTK 介绍 VTK(visualization toolkit)是一个开源的免费软件系统,主要用于三维计算机图形…

【Python开发环境搭建】【Pycharm设置】 新建python文件默认添加编码格式、时间、作者、文件名等信息

1、设置路径 打开pycharm,选择File->Settings(Ctrl Alt S),Editor->File and Templates->Python Script 文件- 设置-编辑器-文件和代码模板-Python Script 2、设置内容 # -*- coding: utf-8 -*- # Time : ${DATE} …

SmartInspect Professional .Net Delphi Crack

SmartInspect Professional .Net & Delphi Crack SmartInspect Professional是一个用于调试和跟踪.NET、Java和Delphi软件的高级日志记录工具。它使您能够识别错误,找到客户问题的解决方案,并让您清楚地了解软件在不同环境和条件下的工作方式。可以轻…

【广州华锐互动】VR沉浸式体验红军长征路:追寻红色记忆,传承红色精神

在历史的长河中,长征无疑是一段充满艰辛和英勇的伟大征程。为了让更多的人了解这段历史,我们利用虚拟现实(VR)技术,为您带来一场沉浸式的体验,重温红军万里长征的壮丽篇章。 一、踏上长征之路 戴上VR眼镜&a…

Hbase--技术文档--单机docker基础安装(非高可用)

环境准备-docker 配置Linux服务器华为云耀云服务器之docker安装,以及环境变量安装 java (虚拟机一样适用)_docker配置java环境变量_一单成的博客-CSDN博客 说明: 本文章安装方式为学习使用的单体hbase项目。主要是学习&#xff…

win10+wsl2+Ubuntu20.2+Pycharm+WSL解释器

目的:创建一个ubuntu系统下的python解释器,作为win平台下的pycharm的解释器。 这样做的好处是可以直接在win系统里操作文件,相比于linux方便一点,而且也不用对wsl的子系统进行迁移。 一、安装前准备 1. 设置-Windows更新-window…

[C++ 网络协议] 套接字的多种可选项

目录 1. 套接字的可选项 2. 获取/设置套接字可选项 2.1 getsockopt函数(获取套接字可选项) 2.2 setsockopt函数(设置套接字可选项) 3. 常用套接字可选项 3.1 SOL_SOCKET协议层的SO_TYPE可选项 3.2 SOL_SOCKET协议层的SO_SN…

IET独立出版 | EI检索 | 2023年第三届机械、航空航天与汽车工程国际会议

会议简介 Brief Introduction 2023年第三届机械、航空航天与汽车工程国际会议(CMAAE 2023) 会议时间:2023年12月8 -10日 召开地点:中国南京 大会官网:www.cmaae.org 航天是当今世界最具挑战性和广泛带动性的高技术领域…

Vue3 Element-plus Upload 上传图片

技术栈:Vue3 Ts Element-plus 官网地址:Upload 上传 | Element Plus 一、背景: 表单上传图片功能 二、效果: 三、流程: ①点击上传图片按钮,系统弹出文件选择对话框,选择图片并确认 ②调…

nvm安装及使用说明

1.说明: nvm 一个nodejs版本管理工具! 2.官网:https://nvm.uihtm.com/ 3.卸载node.js(没安装的话忽略) 4.下载 链接:https://nvm.uihtm.com/nvm-1.1.10-setup.zip 5.nvm安装 卸载之前的node后安装nvm…

SpringCloud教程 | 第二篇: 服务消费者(rest+ribbon)

在上一篇文章,讲了服务的注册和发现。在微服务架构中,业务都会被拆分成一个独立的服务,服务与服务的通讯是基于http restful的。Spring cloud有两种服务调用方式,一种是ribbonrestTemplate,另一种是feign。在这一篇文章…

ADS 错误 1808可能原因 ADSError 1808

​ 调试问题记录: 背景: Ads调试时遇到错误,返回码是 1808,查询倍福官网 得出1808错误原因是 symbol not found 原因: ADSError: symbol not found (1808). Possible incorrect runtime port selected 可能是ads的地…

【计算机网络】序列化与反序列化

文章目录 1. 如何处理结构化数据?序列化 与 反序列化 2. 实现网络版计算器1. Tcp 套接字的封装——sock.hpp创建套接字——Socket绑定——Bind将套接字设置为监听状态——Listen获取连接——Accept发起连接——Connect 2. 服务器的实现 ——TcpServer.hpp初始化启动…

MATLAB算法实战应用案例精讲-【自然语言处理】语义分割模型-DeepLabV3

目录 1、DeepLab系列简介 1.1.DeepLabV1 1.1.1创新点: 1.1.2. 动机: 1.1.3. 应对策略: 1.2.DeepLabV2 1.2.1.创新点: 1.2.2.动机 1.2.3. 应对策略: 1.3.DeepLabV3 1.3.1创新点: 1.3.2. 动机&am…

GD32-舵机的原理

GD32-舵机的原理 舵机的现一脉宽与舵机转动角度 旋转编码器的原理 顺时针:A的下降沿时,B处于高电平; 逆时针:A的下降沿时,B处于低电平; #ifndef _ENCODER_DRIVE_H #define _ENCODER_DRIVE_H#include &quo…
最新文章