element-ui中点击iframe下拉框不收起

vue 专栏收录该内容
6 篇文章 0 订阅

项目场景:

在同一页面中存在具有多个含有下拉弹窗的组件和iframe,当点击有下拉框组件后,再点击iframe区域,下拉框不收起,点击iframe之外区域会收起


问题案例:

案例链接
点击页面中的下拉框组件,再点击红色iframe区域,下拉框不收起,点击红色以外的区域,下拉框收起。


原因分析:

当点击iframe时document监听不到moseup事件,而element-ui是依靠监听document上的moseup去收起下拉框的。
element-ui中统一用了一个directives叫做clickoutside实现的。


解决方案:

解决方案1:

基本思路是监听 focusout事件,通过document.activeElement获取元素信息,如果是iframe的话,调用下拉框组件的handleClose方法,案例链接,可以点先点击蓝色上的select,完了点击蓝色iframe,发现下拉框收起

实际业务中,好多下拉框可能在一个组件中,可以遍历父级的children,保存handleClose方法,完了在监听事件中统一触发,案例链接 例如绿色区域

  • 1
    点赞
  • 0
    评论
  • 1
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值