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,一经查实,立即删除!

相关文章

JSON 方法

JSON 方法 JSON 数据格式规范JSON.stringify使用 replacer格式化&#xff1a;space自定义 toJSON JSON.parse使用 reviver 手写一个简易的 JSON.stringifyeval 实现 JSON.parse总结参考 JSON&#xff08;JavaScript Object Notation&#xff09;是表示值和对象的通用格式&#…

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年国赛总结…

armbian docker 部署 homeassistant 忘记密码重置密码

docker run -d \ --name homeassistant \ --privileged \ --restartunless-stopped \ -e TZMY_TIME_ZONE \ -v /etc/docker/ha:/config \ -v /run/dbus:/run/dbus:ro \ -p 8123:8123 \ ghcr.io/home-assistant/home-assistant:stable重置用户的密码&#xff0c;通过容器命令行 …

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

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

【Python】深度解读Python参数

目录 Python参数种类 Python参数定义 不定参数接收 限定传入参数方式 具体示例 位置参数示例 关键词参数示例 两种方法都支持的形式 参数默认值&#xff08;可选参数&#xff09; 参数默认值定义 引用类型默认值异常行为 参数类型声明 参数类型定义申明 函数返回值…

阿里云推出 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; //输出…

k8s学习-数据管理

在Docker中我们知道&#xff0c;要想实现数据的持久化&#xff08;所谓Docker的数据持久化即数据不随着Container的结束而结束&#xff09;&#xff0c;需要将数据从宿主机挂载到容器中&#xff0c;常用的手段就是Volume数据卷。在K8S中&#xff0c;也提供了存储模型Volume&…

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

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

编程笔记 html5cssjs 069 JavaScrip Undefined数据类型

编程笔记 html5&css&js 069 JavaScrip Undefined数据类型 一、undefined数据类型二、类型运算小结 在JavaScript中&#xff0c;undefined 是一种基本数据类型&#xff0c;它表示一个变量已经声明但未定义&#xff08;即没有赋值&#xff09;或者一个对象属性不存在。 一…

「HDLBits题解」Build a circuit from a simulation waveform

本专栏的目的是分享可以通过HDLBits仿真的Verilog代码 以提供参考 各位可同时参考我的代码和官方题解代码 或许会有所收益 题目链接&#xff1a;Sim/circuit1 - HDLBits module top_module (input a,input b,output q );//assign q a & b ; // Fix meendmodule题目链接&a…

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

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

防火墙双向NAT配置

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