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

浩星2025-09-09 12:46

前言：

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