前言:

        iframe引入界面有el-date-picker日期框,点击出现闪退问题处理。

问题情况:

点击开始日期的输入部分,会出现闪退情况,该组件是iframe调用的内容

问题分析:

事件冒泡,点击与聚焦的时候,事件发送出去了。

问题解决方法:

1、尝试解决冒泡方法,未成功

<el-date-picker@change.native.stop="changeDateTimeFun($event, $index)"@focus.native.stop="handlePickerClick($event)"@click.native.stop="handlePickerClick($event)"...handlePickerClick(event) {event.stopPropagation();
},               

2、css样式解决问题

这里在总结规律中发现,点击中间的 - 与最右边的图标是不影响正常功能,最右边有个删除的图标,所以宽度不能是100%,给删除图标留空间

解决办法:
<template slot="range-separator"><div class="mrTimeText">-</div><div class="customTimeClickDom"> </div>
</template>
.timePicker{width:314px;position: relative;.mrTimeText{color:#1F1F1F;padding:0 10px;}.customTimeClickDom{width:90%;height: 100%;position: absolute;left:0;top: 0;z-index: 100;}}

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

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

相关文章

docker 拉取本地镜像

要在Docker中拉取本地镜像&#xff0c;通常有以下几种实现方法&#xff1a; 使用docker pull命令&#xff1a;可以使用docker pull命令从本地镜像仓库拉取镜像。例如&#xff0c;如果本地镜像的名称是my-image&#xff0c;则可以运行以下命令拉取镜像&#xff1a; docker pull …

嘉立创EDA从原理图框选住器件进行PCB布局

1、先选中需要布局的模块的相关器件2、设计-》布局传递3、在PCB会选中模块相关的元器件&#xff0c;拖动进行布局4、依次将每个模块都分类出来5、板框设计&#xff1a;如果有要求大小&#xff0c;可以先将单位设置为mm&#xff0c;然后画出来板框的尺寸

http接口幂等性

实现 HTTP 接口的幂等性是确保多次相同请求产生相同结果的重要设计原则&#xff0c;尤其在网络不稳定或分布式系统中非常关键。以下是几种常见的实现方式&#xff1a;1. 基于幂等性令牌&#xff08;Token&#xff09;的实现适合支付、订单创建等场景&#xff0c;步骤如下&#…

【华为OD】贪吃的猴子

文章目录【华为OD】贪吃的猴子题目描述输入描述输出描述示例示例一示例二解题思路解法一&#xff1a;前缀和枚举法Java实现Python实现C实现解法二&#xff1a;滑动窗口法Java实现Python实现C实现解法三&#xff1a;优化的动态规划法Java实现Python实现C实现算法复杂度分析解法一…

Flie ,IO流(一)

一.File&#xff0c;IO流概述二.File文件1.File文件对象的创建&#xff08;路径&#xff1a;&#xff09;2.常用方法1:判断文件类型、获取文件信息&#xff08;注意&#xff1a;&#xff09;3.常用方法2:创建文件、删除文件&#xff08;creatNewFile&#xff08;&#xff09;会…

第2讲 机器学习 - 导论

我们正处在一个"数据时代"&#xff0c;更强的计算能力和更丰富的存储资源使数据总量与日俱增。然而真正的挑战在于如何从海量数据中提取价值。企业与组织正通过数据科学、数据挖掘和机器学习的技术体系构建智能系统应对这一挑战。其中&#xff0c;机器学习已成为计算…

如何解决pip安装报错ModuleNotFoundError: No module named ‘python-dateutil’问题

【Python系列Bug修复PyCharm控制台pip install报错】如何解决pip安装报错ModuleNotFoundError: No module named ‘python-dateutil’问题 摘要 在日常 Python 开发过程中&#xff0c;我们经常会遇到各种 pip install 的报错&#xff0c;尤其是在 PyCharm 2025 控制台环境下&…

GitHub Pages 部署

地址&#xff1a;https://github.com/ 参考&#xff1a;https://blog.csdn.net/qq_45802269/article/details/127310952?ops_request_misc&request_id&biz_id102&utm_term%E5%9F%BA%E4%BA%8Egithub%E5%B9%B3%E5%8F%B0%EF%BC%8C%E5%8F%91%E5%B8%83vue%E9%A1%B9%E7%…

redis分布式锁为什么采用Lua脚本实现。而不是事务

Redis 分布式锁使用 Lua 脚本而非事务&#xff0c;核心原因是 Lua 脚本能保证分布式锁操作的 “原子性” 和 “灵活性”&#xff0c;而 Redis 事务在某些场景下无法满足分布式锁的核心需求。一、Redis事务的局限性redis分布式锁的核心是先判断自己是否持有锁&#xff0c;然后在…

Flutter之riverpod状态管理Widget UI详解

一、riverpod状态管理中所涉及到的widget UI组件对比分析UI 组件状态类型语法形式特点ConsumerWidget有状态无状态形式最常用&#xff0c;通过WidgetRef访问provider&#xff0c;所谓无状态&#xff0c;是指ConsumerWidegt不像StatefulWidegt那样创建state,在它内部不可以定义状…

什么是测试

文章目录软件测试是干什么的&#xff1f;软件测试开发工程师是干什么的&#xff1f;测试工程师是干什么的&#xff1f;软件测试开发工程师和测试工程师的区别效率工具能不能替代测试人员&#xff1f;测开人员的上手路线找工作/实习的时候怎么确定自己找的是测开还是测试呢&…

搭建分片集群

主从和哨兵可以解决高可用、高并发读的问题。但是依然有两个问题没有解决&#xff1a;海量数据存储问题高并发写的问题使用分片集群可以解决上述问题&#xff0c;如图:分片集群特征&#xff1a;集群中有多个master&#xff0c;每个master保存不同数据每个master都可以有多个sla…

在ubuntu系统中如何将docker安装在指定目录

在 Ubuntu 系统中&#xff0c;Docker 默认安装路径&#xff08;程序文件&#xff09;通常在/usr/bin等系统目录&#xff0c;而核心数据&#xff08;镜像、容器、卷等&#xff09;默认存储在/var/lib/docker。若需将数据目录指定到其他位置&#xff08;这是更常见的需求&#xf…

服务器都是用的iis, 前端部署后报跨域,不是用同一个服务器 是前端项目的服务器做Nginx转发,还是后端项目的服务器做Nginx转发?

当服务器环境为 IIS&#xff08;而非 Nginx&#xff09;&#xff0c;且前端、后端部署在不同服务器导致跨域时&#xff0c;核心思路与 Nginx 场景一致&#xff0c;但实现工具从「Nginx」替换为「IIS 配置」。此时依然存在 “后端服务器配置跨域头” 和 “前端服务器配置反向代理…

【大前端】前端生成二维码

前端生成二维码有很多方法&#xff0c;常见的做法是使用 JavaScript 库 来生成二维码。下面整理几种常用方案&#xff0c;并附示例代码。1️⃣ 使用 qrcode 库&#xff08;推荐&#xff09;qrcode 是一个非常流行的前端 JS 库&#xff0c;可以生成 Canvas 或者 SVG 的二维码。安…

LeetCode 刷题【71. 简化路径】

71. 简化路径 自己做 解&#xff1a;遍历检查 class Solution { public:string simplifyPath(string path) {int p 0;string res;while(p < (int)path.size()){//情况1&#xff1a;遇到"/./" 》p跳过"/."if(p < (int)path.size() - 2 && p…

《算法闯关指南:优选算法-双指针》--01移动零,02复写零

&#x1f525;个人主页&#xff1a;草莓熊Lotso &#x1f3ac;作者简介&#xff1a;C研发方向学习者 &#x1f4d6;个人专栏&#xff1a;《C知识分享》《Linux 入门到实践&#xff1a;零基础也能懂》《数据结构与算法》《测试开发实战指南》《算法题闯关指南》 ⭐️人生格言&am…

【小白笔记】命令不对系统:无法将‘head’项识别为 cmdlet、函数、脚本文件或可运行程序的名称

head : 无法将“head”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写&#xff0c;如果包括路径&#xff0c;请确保路径正确&#xff0c;然后再试一次。所在位置 行:1 字符: 1 head -5 train_data.csv ~~~~ CategoryInfo : ObjectNotFound: (h…

宋红康 JVM 笔记 Day15|垃圾回收相关算法

一、今日视频区间 P138-P153 二、一句话总结 标记阶段&#xff1a;引用计数算法&#xff1b;标记阶段&#xff1a;可达性分析算法&#xff1b;对象的finalization机制&#xff1b;MAT与JProfiler的GC Roots溯源&#xff1b;清除阶段&#xff1a;标记-清除算法&#xff1b;清除阶…

Go基础(③Cobra)

Cobra 是帮你快速开发命令行工具的框架 假设你想做一个叫 todo 的命令行工具&#xff0c;实现这些功能&#xff1a; todo add "买牛奶" → 添加待办 todo list → 查看所有待办 todo done 1 → 标记第 1 个待办为已完成 没有 Cobra 的话&#xff0c;你需要自己写代…