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

前言:

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>
javascript 复制代码
.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;
    }
  }
相关推荐
β添砖java3 小时前
CSS网格布局
前端·css·html
木易 士心5 小时前
Ref 和 Reactive 响应式原理剖析与代码实现
前端·javascript·vue.js
程序员博博5 小时前
概率与决策 - 模拟程序让你在选择中取胜
前端
被巨款砸中5 小时前
一篇文章讲清Prompt、Agent、MCP、Function Calling
前端·vue.js·人工智能·web
sophie旭5 小时前
一道面试题,开始性能优化之旅(1)-- beforeFetch
前端·性能优化
Cache技术分享5 小时前
204. Java 异常 - Error 类:表示 Java 虚拟机中的严重错误
前端·后端
uhakadotcom5 小时前
execjs有哪些常用的api,如何逆向分析网站的加签机制
前端·javascript·面试
ObjectX前端实验室5 小时前
【图形编辑器架构】:无限画布标尺与网格系统实现解析
前端·canvas·图形学
你的电影很有趣6 小时前
lesson71:Node.js与npm基础全攻略:2025年最新特性与实战指南
前端·npm·node.js
闲蛋小超人笑嘻嘻6 小时前
find数组方法详解||Vue3 + uni-app + Wot Design(wd-picker)使用自定义插槽内容写一个下拉选择器
前端·javascript·uni-app