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) {}});
}

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

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

相关文章

N65总账凭证管理凭证查询(sql)

--核算账簿 select code , name , pk_setofbook from org_setofbook where ( pk_setofbook in ( select pk_setofbook from org_accountingbook where 1 1 and ( pk_group N0001A11000000000037X ) and ( accountenablestate 2 ) ) ) order by code;--核算账簿 select code …

AI在数模中的应用(附2024年美赛AI规则解读)

近期一直有人私信询问AI对数模的应用。本次想借着2024年美赛对AI工具的使用说明已经去年国赛开会的结果&#xff0c;跟大家分享一下国赛、美赛对于AI的态度以及如何使用AI应用于数模。本文将基于本人常用的三种AI工具(ChatGPT、文心一言、NEW bing)进行讲解 根据2023年国赛总结…

数据库技术栈 —— B树与B+树

数据库技术栈 —— B树与B树 一、复习二、MySQL中的B树应用 一、复习 B树是多路平衡查找树的意思 参考文章或视频链接[1] 【王道计算机考研 数据结构】 二、MySQL中的B树应用 这篇文章里的计算题还是讲的不错的。 参考文章或视频链接[1] 《探究MySQL的索引结构选型》

阿里云推出 3.x Java 探针,解锁应用观测与治理的全新姿势

作者&#xff1a;张铭辉、泮圣伟 前言 随着春节大促即将到来&#xff0c;为了确保线上业务高效稳定地运行&#xff0c;电商企业大多会对旗下关键业务应用进行多轮测试。通过模拟线上较高流量的请求&#xff0c;来观察服务性能的实际表现。以某企业的业务测试报告举例&#xf…

SpringClound项目相关

nacos本机模式非虚拟机启动也可正常连接 nacos中的配置中心相当于在application.yml中的相关配置&#xff0c;转移位置&#xff0c;内容同application.yml完全一样均可。 黑马项目导入后&#xff0c;依赖缺失&#xff1a; 首先尝试maven重新加载&#xff0c;控制台提示传递依…

稀疏场景高性能训练方案演变|京东广告算法架构体系最佳实践

近年来&#xff0c;推荐场域为提升模型的表达能力和计算能力&#xff0c;模型规模和计算复杂度大幅增加&#xff0c;同时&#xff0c;高规格硬件资源为模型迭代、算法优化带来了更大的机遇和挑战。为了应对模型规模和算力升级带来的存储、IO和计算挑战&#xff0c;京东零售广告…

解决WindowServer2022关于EDGE浏览器识自签证书问题

1、证书颁发机构服务打开MMC控制台 添加证书、证书模板 2、复制证书模板

鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Gauge组件

鸿蒙&#xff08;HarmonyOS&#xff09;项目方舟框架&#xff08;ArkUI&#xff09;之Gauge组件 一、操作环境 操作系统: Windows 10 专业版、IDE:DevEco Studio 3.1、SDK:HarmonyOS 3.1 二、Gauge组件 数据量规图表组件&#xff0c;用于将数据展示为环形图表。 子组件 无…

Unity_Visual Effect Graph

Unity_Visual Effect Graph Unity可视化特效渲染虽不及Unreal Engine,然也还是吊打一众其他引擎的,粗浅整理一波吧,需要深入研究的点实在是太多了。 按照常规包管理方式安装Visual Effect Graph插件: 安装之后,示例文件夹中自带资源,拖入场景即可: 场景只是资源的显…

SOLIDWORKS Simulation 2024增强新功能

SOLIDWORKS 2024 新功能前瞻| SOLIDWORKS Simulation 功能增强 • 性能增强功能 • 壳体的接合交互 • 网格性能 • 欠约束实体检测 • 增强型轴承接头 • 收敛检查图解 • 去耦合混合自由体模式 • 复制算例时排除网格和结果 • 新增在网格化后及分析完成后自动保存模…

C++语法学习

一、字符串 1.字符与整数的联系--ASCII表 0~9 :48~57 A~Z:65~90 a~z:97~122 字符与数字之间转换: 1.1字符转数字&#xff1a; 字符转数字&#xff1a; char c A;cout << c-A << endl; //输出0cout << (int)c << endl; //输出…

Vue学习笔记14 --自定义hook函数/toRef/provide/inject等

9.自定义hook函数 什么是hook&#xff1f;—— 本质是一个函数&#xff0c;把setup函数中使用的Composition API进行了封装。 类似于vue2.x中的mixin。 自定义hook的优势: 复用代码, 让setup中的逻辑更清楚易懂。 10.toRef 作用&#xff1a;创建一个 ref 对象&#xff0c;其…

软件压力测试:探究其目的与重要性

随着软件应用在各行各业中的广泛应用&#xff0c;确保软件在高负载和极端条件下的稳定性变得至关重要。软件压力测试是一种验证系统在不同负载条件下的性能和稳定性的方法。本文将介绍软件压力测试的目的以及为什么它对软件开发和部署过程至关重要。 验证系统性能的极限&#x…

防火墙双向NAT配置

目录 拓扑需求 配置配置服务器映射配置NAT策略配置访问外网的NAT 配置安全策略 测试 拓扑 需求 分公司内部的客户端可以通过公网地址访问到内部的服务器 主要配置区域 配置 测试之前记得开启服务器的服务 配置服务器映射 配置NAT策略 源地址和目的地址同时转换 配置访问…

C++文件操作(2)

文件操作&#xff08;2&#xff09; 1.二进制模式读取文本文件2.使用二进制读写其他类型内容3.fstream类4.文件的随机存取文件指针的获取文件指针的移动 1.二进制模式读取文本文件 用二进制方式打开文本存储的文件时&#xff0c;也可以读取其中的内容&#xff0c;因为文本文件…

【Oracle云】OCI DevOps Services 构建自动化流水线 (2) - 创建 Build Pipeline CI 流水线

在软件开发的生命周期中&#xff0c;持续集成&#xff08;Continuous Integration, CI&#xff09;是确保团队协作、代码质量和交付效率的关键环节。 OCI DevOps Services 作为 Oracle 云原生 CI/CD 服务&#xff0c;为开发者提供了标准的CI/CD平台&#xff0c;支持构建自动化的…

Vue学习总结

声明&#xff1a;本文来源于黑马程序员PDF讲义 双向绑定&#xff1a; 修改表单项标签&#xff0c;发现vue对象data中的数据也发生了变化 双向绑定的作用&#xff1a;可以获取表单的数据的值&#xff0c;然后提交给服务器 事件绑定 v-on: 用来给html标签绑定事件的。需要注意…

Zookeeper分布式队列实战

目录 Zookeeper分布式队列 普通方式实现 设计思路 具体实现 使用Curator实现 具体实现 注意事项 Zookeeper分布式队列 常见的消息队列有:RabbitMQ&#xff0c;RocketMQ&#xff0c;Kafka等。Zookeeper作为一个分布式的小文件管理系统&#xff0c;同样能实现简单的队列功…

从零学习Linux操作系统 第二十三部分 系统中火墙的管理及优化

1 、实验环境设定 第一台主机需要两个网卡 另一台主机一个网卡桥接到VMnet0上 第一台主机保证能够和windows保持连接 设定第一块儿网卡能够与Windows连接 设定第二台主机能够与第一台主机连接 二、火墙中的基本名词及知识 火墙就相当于是一个表格&#xff0c;这个表格里写…

svn 安装路径

SVN客户端安装&#xff08;超详细&#xff09; 一、SVN客户端安装 1、下载安装包地址&#xff1a;https://tortoisesvn.net/downloads.html 此安装包是英文版的&#xff0c;还可以下载一个语言包&#xff0c;在同界面的下方 一直点击下一步&#xff0c;直到弹出选择红框 然…