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