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;
    }
  }
相关推荐
麦麦大数据3 小时前
F032 材料科学文献知识图谱可视化分析系统(四种知识图谱可视化布局) | vue + flask + echarts + d3.js 实现
vue.js·flask·知识图谱·数据可视化·论文文献·1024程序员节·科研图谱
web打印社区4 小时前
使用React如何静默打印页面:完整的前端打印解决方案
前端·javascript·vue.js·react.js·pdf·1024程序员节
喜欢踢足球的老罗4 小时前
[特殊字符] PM2 入门实战:从 0 到线上托管 React SPA
前端·react.js·前端框架
小光学长4 小时前
基于Vue的课程达成度分析系统t84pzgwk(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
前端·数据库·vue.js
Baklib梅梅5 小时前
探码科技再获“专精特新”认定:Baklib引领AI内容管理新方向
前端·ruby on rails·前端框架·ruby
南方以南_5 小时前
Chrome开发者工具
前端·chrome
YiHanXii5 小时前
this 输出题
前端·javascript·1024程序员节
楊无好5 小时前
React中ref
前端·react.js
程琬清君5 小时前
vue3 confirm倒计时
前端·1024程序员节
麦麦大数据5 小时前
F033 vue+neo4j图书智能问答+知识图谱推荐系统 |知识图谱+neo4j+vue+flask+mysql实现代码
vue.js·flask·nlp·neo4j·智能问答·图书·1024程序员节