iview DatePicker 日期选择组件在弹窗中使用transfer,导致选择日期弹窗会关闭的问题

背景:在弹窗里面使用日期选择组件,选择组件的面板被弹窗遮挡了部分,所以需要使用transfer属性,但是使用之后组件面板插入body中了,面板的事件会导致弹窗关闭。

解决方案: 

添加上transfer属性和指定的date-picker样式名

<DatePicker transfer transfer-class-name="date-picker" :value="dateValue" type="date"></DatePicker>


在合适的时机中,通过指定的样式名给日期选择组件的选择面板绑定事件进行阻止冒泡  

dateStopEvent() {
      this.$nextTick(() => {
        try {
          const ele = document.querySelector('.date-picker');
          ele.addEventListener('click', (event) => {
            event.stopPropagation();
          });
        } catch(e) {}
      });
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/369619.html

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

相关文章

高级FPGA开发之基础协议PCIe

基础协议之PCIe部分 一、TLP包的包头 在PCIe的系统中&#xff0c;tlp包的包头的结构有许多部分是相似的&#xff0c;通过掌握这些常规的包头&#xff0c;能帮助理解在PCIe总线上各个设备之间如何进行数据的收发。 通用的字段 通用字段作用Fmt决定了包头是3DW还是3DW&#xff…

软件测试学习笔记-测试用例的编写

7中测试分类 按照阶段可划分单元测试、集成测试、系统测试、验收测试。代码可见度划分黑盒测试、灰盒测试、白盒测试 单元测试&#xff1a;针对源代码的测试 集成测试&#xff1a;针对接口进行测试 系统测试&#xff1a;针对功能和非功能的测试 验收测试&#xff1a;公测、内测…

中科方德桌面操作系统的安装方法

原文链接&#xff1a;中科方德桌面操作系统的安装方法 大家好&#xff01;继我们之前介绍了如何在VMware Workstation上安装统信UOS、麒麟OS及麒麟信安操作系统之后&#xff0c;今天我为大家带来一篇全新的教程——在VMware Workstation上安装中科方德桌面操作系统的详细步骤。…

《云原生安全攻防》-- 容器安全风险分析

在本节课程中&#xff0c;我们将提供一个全面的视角&#xff0c;来深入探讨容器环境下的安全风险&#xff0c;帮忙大家建立起容器环境下安全风险的整体认知。 在这个课程中&#xff0c;我们将学习以下内容&#xff1a; 容器技术概述&#xff1a;什么是容器技术以及它解决了什么…

task2:Verilog编写的设计模块在模块内部直接调用task

Verilog编写的设计模块在模块内部直接调用task 1&#xff0c;概念2&#xff0c;模块设计2.1&#xff0c;RTL设计2.2&#xff0c;tb测试代码2.3&#xff0c;sim仿真输出 参考文献&#xff1a; 1&#xff0c;练习七-在Verilog中使用任务task 1&#xff0c;概念 在模块设计中&…

【Docker进阶】镜像制作-用快照制作Docker镜像

进阶一 docker镜像制作 文章目录 进阶一 docker镜像制作1. 镜像制作及原因2. Docker镜像制作的方式3. 快照制作镜像 1. 镜像制作及原因 镜像制作是因为某种需求&#xff0c;官方的镜像无法满足需求&#xff0c;需要我们通过一定手段来自定义镜像来满足要求。 制作镜像往往有…

STM32--SPI通信协议(2)W25Q64简介

一、W25Q64简介 1、W25Qxx中的xx是不同的数字&#xff0c;表示了这个芯片不同的存储容量&#xff1b; 2、存储器分为易失性与非易失性&#xff0c;主要区别是存储的数据是否是掉电不丢失&#xff1a; 易失性存储器&#xff1a;SRAM、DRAM&#xff1b; 非易失性存储器&#xff…

0基础学习VR全景平台篇第141篇:如何制作卫星航拍全景

大家好&#xff0c;欢迎观看蛙色官方系列全景摄影课程&#xff01; 很多人都看过或者拍摄过航拍全景&#xff0c;其效果相比于普通的地拍的确有着更加震撼的拍摄效果&#xff0c;但是受限于无人机高度&#xff0c;以及禁飞区等等限制&#xff0c;导致很多大场景无法展示完全&a…

DS18B20温度传感器

文章目录 一、介绍DS18B20了解DS18B20引脚及电路图内部结构框图存储器结构单总线&#xff08;1 wire bus&#xff09;介绍单总线电路规范单总线时序结构初始化发送一个数据接收一位数据发送一个字节与接收一个字节 DS18B20操作流程所要使用的数据帧温度存储格式 二、实现温度检…

大数据信用报告在线查询平台哪个好?

随着大数据技术在金融风控的运用&#xff0c;大数据信用越来越被人熟知&#xff0c;由于线下没有查询大数据信用的地方&#xff0c;想要查询大数据信用报告只有在线上查询&#xff0c;那大数据信用报告在线查询平台哪个好呢?本文贷你一起去了解市面上比较好的三个平台。 大数据…

风控安全产品系统设计

风控业务架构 我把风控业务架构的分层分为6层,分别是组件层、业务层、决策层、能力层、计算层、可视层。 以下基建为基础安全产品的简称。 组件层 组件层的职责是:数据收集与行为反制。 从接口、设备、行为三个维度进行数据收集,接收决策层的指令进行行为反制。为了保证…

Alt + TAB 禁止在 Edge 标签页之间切换

&#xff08;原文&#xff1a;https://blog.iyatt.com/?p13587 &#xff09; 浏览器标签页之间切换可以用 {Ctrl}{Tab} 或者 {Ctrl}{数字}精准到标签页码&#xff0c;结果 Windows 11 默认把 Edge 标签页切换混入了 {Alt}{Tab} 前台应用窗口切换&#xff0c;经常不注意是在 Ed…

深入Spring MVC的工作流程

深入Spring MVC的工作流程 在Spring MVC的面试问题中&#xff0c;常常被询问到的一个问题。Spring MVC的程序中&#xff0c;HTTP请求是如何从开始到结束被处理的。为了研究这个问题&#xff0c;我们将需要深入学习一下Spring MVC框架的核心过程和工作流程。 1. 启动请求生命周…

CMake生成osg的FFMPEG插件及Windows下不生成VS工程问题解决

在Windows下&#xff0c;如何利用CMake生成osg的FFMPEG插件&#xff0c;请参考如下博文&#xff0c;同生成jpeg插件类似&#xff1a; osg第三方插件的编译方法&#xff08;以jpeg插件来讲解&#xff09;。 如下为生成FFMPEG时必要的设置&#xff1a; 注意&#xff1a; 一定要…

一篇文章了解系统眼中的键盘--以一个简单的系统分析从按键的输入到字符的显示

键盘输入 实现使用的设备 intel架构32位CPU, 思路为嵌入式系统工程师,使用的操作系统是《30天自制操作系统》里面的系统进行讲解 硬件实现 按键 使用单片机等的引脚可以获取电平状态从而获得按键的状态(单片机是一种集成到一块硅片上构成的一个小而完善的微型计算机系统, 用…

QT研究笔记(一)windows 开发环境安装部署

一、Qt 是什么&#xff1f; Qt 是一个跨平台的应用程序开发框架&#xff0c;最初由挪威的 Trolltech 公司开发&#xff0c;并于2008年被诺基亚收购。后来&#xff0c;Qt 框架由 Digia 公司接手&#xff0c;并在2012年成立了 The Qt Company。Qt 提供了一套丰富的工具和类库&am…

快速了解线程池

文章目录 一. 线程池初了解1. 什么是线程池2. 使用线程池的好处 二. 线程池再了解1. ThreadPoolExecutor类的重要配置2. 线程池的工作流程3. 使用Java标准库创建线程 三. 模拟实现简易线程池 一. 线程池初了解 1. 什么是线程池 线程池是一种采用池化思想&#xff08;同理还有…

由vscode自动升级导致的“终端可以ssh服务器,但是vscode无法连接服务器”

问题描述 简单来说就是&#xff0c;ssh配置没动&#xff0c;前两天还可以用vscode连接服务器&#xff0c;今天突然就连不上了&#xff0c;但是用本地终端ssh可以顺利连接。 连接情况 我的ssh配置如下&#xff1a; Host gpu3HostName aaaUser zwx现在直接在终端中进行ssh&am…

[Python] 什么是KMeans聚类算法以及scikit-learn中的KMeans使用案例

什么是无监督学习&#xff1f; 无监督学习是机器学习中的一种方法&#xff0c;其主要目的是从无标签的数据集中发现隐藏的模式、结构或者规律。在无监督学习中&#xff0c;算法不依赖于任何先验的标签信息&#xff0c;而是根据数据本身的特征和规律进行学习和推断。无监督学习…

重写Sylar基于协程的服务器(6、HOOK模块的设计)

重写Sylar基于协程的服务器&#xff08;6、HOOK模块的设计&#xff09; 重写Sylar基于协程的服务器系列&#xff1a; 重写Sylar基于协程的服务器&#xff08;0、搭建开发环境以及项目框架 || 下载编译简化版Sylar&#xff09; 重写Sylar基于协程的服务器&#xff08;1、日志模…