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

最新推荐文章于 2024-03-01 17:45:49 发布

coderMozart

最新推荐文章于 2024-03-01 17:45:49 发布

阅读量1.6k

点赞数 1

分类专栏： vue 文章标签： vue.js

本文链接：https://blog.csdn.net/coderMozart/article/details/111045776

版权

vue 专栏收录该内容

6 篇文章

订阅专栏

项目场景：

在同一页面中存在具有多个含有下拉弹窗的组件和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方法，完了在监听事件中统一触发，案例链接例如绿色区域

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

coderMozart

关注关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

软件测试知识点和面试题--UI自动化篇

行走在路上

02-17

2420

主流自动化测试框架介绍软件测试的自动化一般可以分为3层 * 代码层的单元测试 * 接口层的集成测试 * UI 层的测试 1）代码层自动化代码层的自动化一般指针对代码进行的单元测试,比较常用的单元测试框架比如Java的Junit, Python的PyUnit等等，由于这部分并非本教程重点，这里就不详细展开，需要的同学可以自行学习。 2）接口层自动化接口层的自动化测试主要是对系统和组建之间的接口进行测试，主要目标是校验数据的交换和业务的流程，接口测试可以测试功能、也可以测试性能、测试压力、测试安

vue中调用全屏方法、 elementUI弹框在全屏模式下不出现问题、多级嵌套弹框蒙层遮挡问题等处理与实现方案

最新发布

CuiCui_web的博客

11-11

1248

全屏模式下弹框不展示的原因是elementUI的弹框我们让他挂在body中了，而我们全屏的div盒子不是整个文档，这时候就找不到弹框了。当我们把弹框改为插入到父元素上这时候会出现蒙层盖住整个页面，什么也点不了的问题。这是elementUI官方的一个bug，解决方案，需把父弹框挂在body中。这时候就有点无解了。先介绍最优的方案，然后再介绍一种不太好的方案（为啥说不好呢，因为它是操作dom，会导致只要切换全屏、退出全屏，整个页面就进行重排重绘）

参与评论您还未登录，请先登录后发表或查看评论

focus-outside::package: 一个很棒的 clickOutside 库，它解决了 iframe 无法触发 clickOutside 的问题，并且它支持分组绑定处理。A good clickOutside library, which solves the problem that iframe cannot trigger clickOutside, and it supports grouping binding processing

05-01

焦点外 | 这是什么好的clickOutside库可以解决iframe无法触发clickOutside的问题，并且支持分组绑定处理。原料药功能描述选项 bind 将外部处理程序绑定到元素 el ， callback ， key ， className ，有关详细信息，请参见下面的Bind Params表 unbind 清除元素绑定功能 el元件节点绑定参数范围类型描述必需的默认 el 元素要绑定的元素真的 -- callback 功能外部事件触发时的处理功能真的 -- key 字符串/函数将元素或函数分为一组类型。单击同一组元素时，将不会触发外部事件，而单击同一组外部的元素将触发外部事件。错误的 callback函数 className 细绳绑定到元素的类名错误的 “聚焦外” 注意绑定元素后， focus-outside会将元素

日期框、下拉框点击iframe区域无法关闭

qq_44130459的博客

09-30

611

vue 嵌套 jsp 的页面中，上面查询条件部分是element 表单，下面（内容）部分是iframe引入的jsp页面；问题：查询表单日期框、下拉框，获取焦点（弹出内容）后，点击 iframe 嵌套的内容，不会失去焦点。给 iframe 区域加遮罩层，用变量（mask）控制遮罩层的存在的时机。

鼠标点在iframe页面内无法关闭父页面的select下拉框

高压锅博客

06-22

1071

为什么在子页面点击无法关闭父页面下拉框？答： 1. 通常在没有iframe时，当我们做一个下拉框的功能，当鼠标在页面上的其它位置点击一下时，这个下拉框就隐藏掉了，这个功能很容易做，给document绑定onmousedown或onclick即可。 2. 如果页面上有iframe时，鼠标点击在iframe内时，包含iframe的document是不响应任何事件的，所以需要给iframe绑定类似的事件，当iframe指向的是第三方的内容时，还在考虑跨域的问题，因此通过操作iframe的document是行不

关于elementUI的select-tree组合下拉框，选择后下拉框不收起

weixin_44847425的博客

12-13

6750

在项目中会有这种需要select和tree一起搭配成的树形下拉框，但是会有如图的问题，点击了一个选项之后，下拉框并没有收起来。样式书写 <el-form-item label="上级部门：" prop="pid"> <el-select ref="treeSelect" v-model="form.department_value" placeholder="请选择" clearable> <el-option value=""></el-option&g.

下拉框无法收回的解决方法：focus-outside使用方式

xiao1215fei的专栏

04-01

1635

在开发过程中遇到过这样一种情况，当select下拉面板展开后，此时如果点击iframe或富文本编辑器的输入框，select的下拉面板没有收回，这是因为在iframe或富文本编辑器的点击没有触发select下拉面板的outside点击事件，所以需要通过focus-outside插件来解决。官方npm网站：https://github.com/txs1992/focus-outside/blob/master/docs/zh-cn.md#readme 安装：npm install focus-outside

vue 切换iframe_Vue 多系统切换实现方案(iframe嵌套的两三事)

weixin_39702649的博客

12-19

1698

前言公司分好几个后台模块，统一使用vue+elementUi框架开发，每一个后台模块都是单独团队开发的。并且几个系统整体的风格、布局一样的，包括左侧边栏，上方的面包屑等用户在使用的时候，可能要切换别的系统就要在浏览器里，新打开窗口，再输入网址，回车。总结来说，低效，所以现在想将几个系统融合到一个里边，并且每次切换系统的时候保留用户的操作。线上demo:http://an888.net/all/#/...

ElementUI中使用富文本编辑器(quill-editor）实现图片视频上传，图片拖拽和缩放，以及菜单悬停显示中文和表情包

m0_61820867的博客

07-28

4535

介绍了ElementUI中使用富文本编辑器(quill-editor），优化有些功能（图片缩放，拖拽）视频上传回显以及菜单悬停显示中文以及表情包

实现点击空白区域隐藏下拉弹窗

余阿良的博客

05-06

6808

分析elemntui v-clickoutside，实现点击开白区域隐藏下拉弹窗问题

vue element-ui级联选择器选中后下拉框自动收起

ʚ菲菲的博客ɞ

02-25

1863

Cascader 级联选择器设置严格的遵守父子节点不互相关联(checkStrictly: true)，此时每一级都可以选择(选项前会有圆圈可勾选)，实现点击选中后下拉框自动收起。设置监听选择器值变化的时候，把 dropDownVisible 属性设置为 false 即可。 <el-cascader ref="deptIdCascader" v-model="updateInfo.deptId" :props="{checkStrictly: true}"&g

iframe中单击关闭父页面中的菜单

qq_20048233的博客

03-31

1577

最近工作中遇到一个问题，其实做出来了发现不麻烦，但搞了好几填，就记录下来和大家分享下，具体的问题是公司前端使用的是extjs，当系统界面通过导航栏中菜单绑定事件加入的tabpanel里的页面都是iframe方式加入的，然而这里的iframe具体界面是我无法改动的，想要完成的功能就是在这些iframe界面中点击时能关闭掉菜单。具体实现如下： addContentPanel这个方法就是调用

解决antd中Dropdown点击iframe无法关闭的问题

txf666的博客

09-18

629

解决antd中Dropdown点击iframe无法关闭的问题

Vue + ElementUI 开发项目，遇到下拉框option 失去焦点时不关闭的问题

weixin_43968963的博客

04-27

4226

问题描述：使用Vue + ElementUI 框架开发项目且用了下拉加载更多，遇到了下拉框（el-select）中的option（el-option）失去焦点后，下拉框不隐藏，并在控制台报错**Uncaught TypeError: Cannot read properties of null (reading ‘disabled’) **，截图如下：控制台报错：不关闭的下拉选择框：百度参考了其他文章之后得到的结果是使用了 el-dropdown 下缺少 el-dropdown-menu 元素

vue3+element-plus项目中使用iframe嵌入子项目，点击el-menu打开子级菜单，再点击iframe区域，子级菜单不收起（隐藏）

qq_34743346的博客

12-25

1315

以vue3+element-plus的主项目中的某些页面使用iframe嵌入了angular子项目。点击某些菜单需要打开对应的angular页面。

el-select点击空白处无法收起下拉框（失去焦点并隐藏）

Cymiaoo

03-01

2047

element 中多选的select 有个问题，就是点击空白或者关闭弹窗，下拉还会一直展示出来。

element的el-select给下拉框添加背景以及鼠标离开背景色不消失问题

05-19

6321

1,给下拉框添加背景色 // 下拉框内容背景色 .el-select-dropdown__item.selected,.el-select-dropdown__item:hover,.el-select-dropdown__item.hover{ color: #fff; background: #409EFF; } 效果图: ok,有效果了. 2,解决添加背景鼠标移出去背景不消失问题, 当我鼠标移出下拉框的时候,看效果: 看,鼠标移出下拉框了,hover的背景色并没有消失**(看框里面,我.

element 下拉框中树节点选中之后不收回下拉框

DJIASHAOYE的博客

12-16

2320

element UI 下拉框选项包含树节点 <sg-select ref="select" size="small" clearable placeholder="请选择" v-model="treeShowArr" @clear="removeChange"

easyui的下拉框combobox在包含的iframe页面里点击不能收回解决办法

weixin_39755019的博客

10-10

646

此处下拉框不能收回是因为iframe是新页面，点击事件不能传递到父级页面。我们需要在父级页面监听iframe页面的点击事件，进而操作下拉框的动作：以下是获取iframe的js： var iframe = document.getElementById('iframeId'); iframe.contentWindow.addEventListener('click',function (e...

selenium获取iframe下的dropdown封装的动态下拉框元素

03-31

以下是使用Selenium获取iframe下的dropdown封装的动态下拉框元素的示例代码： ```python from selenium.webdriver.support.ui import Select class DynamicDropdown: def __init__(self, driver, iframe_id, dropdown_id): self.driver = driver self.iframe_id = iframe_id self.dropdown_id = dropdown_id def select_option_by_visible_text(self, option_text): self.driver.switch_to.frame(self.iframe_id) dropdown = Select(self.driver.find_element_by_id(self.dropdown_id)) dropdown.select_by_visible_text(option_text) self.driver.switch_to.default_content() ``` 使用方法： ```python from selenium import webdriver driver = webdriver.Chrome() driver.get("https://example.com") # switch to iframe iframe_id = "frameId" driver.switch_to.frame(iframe_id) # initialize dynamic dropdown object dropdown_id = "dropdownId" dynamic_dropdown = DynamicDropdown(driver, iframe_id, dropdown_id) # select option by visible text option_text = "Option 1" dynamic_dropdown.select_option_by_visible_text(option_text) # switch back to default content driver.switch_to.default_content() ```