el-popover实现点击空白区域关闭,弹窗区域不关闭

难点:

普通方法会无法关闭,虚拟触发会导致选一个关一个,不用visible显示的方法太麻烦。
所以结合其他人的方法,使用手动监听判断的方法(点击蓝色区域看参考,这大佬vue2的,我vue3)

注意:

在 Popover show 的时候监听 document 的 click 事件,触发进入 hidePanel 方法,判断当前点击的 el 是否在 Popover 内部,如果不在,则手动 hide Popover ,并且移除监听事件
而且关键是el-form自己不能挂ref,只能外层套一个div。第二个关键点是:teleported="false",表单选项默认挂在body上,你得取消,挂本页面才能不选一下就关闭了

代码:

<el-form-item><el-popover:visible="visiblePopover":width="425"placement="bottom-start"trigger="click"@show="showEvent"@hide="hideEvent"><div ref="projectButton"><el-formclass="formPopover"label-width="64px":model="queryParams":inline="true"><el-form-item prop="Sex" label="性别"><el-selectv-model="queryParams.Sex"clearablefilterableplaceholder="请选择性别":teleported="false"><el-optionv-for="item in SexList":key="item.value":label="item.label":value="item.value"/></el-select></el-form-item><el-form-item prop="BuildingUp" label="圈舍"><el-selectv-model="queryParams.BuildingUp"clearablefilterableplaceholder="请选择圈舍":teleported="false"><el-optionv-for="item in BuildingUpList":key="item":label="item":value="item"/></el-select></el-form-item><el-form-item prop="GroupName" label="栏舍"><el-selectv-model="queryParams.GroupName"clearablefilterableplaceholder="请选择栏舍":teleported="false"><el-optionv-for="item in GroupNameList":key="item.value":label="item.value":value="item.value"/></el-select></el-form-item><el-form-item prop="CowType" label="养殖类型"><el-selectv-model="queryParams.CowType"clearablefilterableplaceholder="请选择养殖类型":teleported="false"><el-optionv-for="item in CowTypeList":key="item.value":label="item.label":value="item.value"/></el-select></el-form-item><el-form-item prop="Category" label="生长阶段"><el-selectv-model="queryParams.Category"clearablefilterableplaceholder="请选择生长阶段":teleported="false"><el-optionv-for="item in CategoryList":key="item.value":label="item.value":value="item.value"/></el-select></el-form-item><el-form-item prop="RepCode" label="繁殖状态"><el-selectv-model="queryParams.RepCode"clearablefilterableplaceholder="请选择繁殖状态":teleported="false"><el-optionv-for="item in RepCodeList":key="item.value":label="item.value":value="item.value"/></el-select></el-form-item><el-form-item prop="GroCode" label="泌乳状态"><el-selectv-model="queryParams.GroCode"clearablefilterableplaceholder="请选择泌乳状态":teleported="false"><el-optionv-for="item in GroCodeList":key="item.value":label="item.value":value="item.value"/></el-select></el-form-item><el-form-item prop="Variety" label="品种"><el-selectv-model="queryParams.Variety"clearablefilterableplaceholder="请选择品种":teleported="false"><el-optionv-for="item in VarietyList":key="item.value":label="item.value":value="item.value"/></el-select></el-form-item><el-form-item prop="Color" label="花色"><el-selectv-model="queryParams.Color"clearablefilterableplaceholder="请选择花色":teleported="false"><el-optionv-for="item in ColorList":key="item.value":label="item.value":value="item.value"/></el-select></el-form-item><el-form-item prop="Lact" label="胎次"><el-selectv-model="queryParams.Lact"clearablefilterableplaceholder="请选择胎次":teleported="false"><el-optionv-for="item in LactList":key="item":label="item":value="item"/></el-select></el-form-item><el-form-item prop="Flag" label="在场状态"><el-selectv-model="queryParams.Flag"clearablefilterableplaceholder="请选择在场状态":teleported="false"><el-optionv-for="item in FlagList":key="item.value":label="item.label":value="item.value"/></el-select></el-form-item><el-form-item prop="StartTime" label="进场时间"><el-date-pickerv-model="dateList":clearable="true"type="daterange"unlink-panelsrange-separator="~"start-placeholder="开始时间"end-placeholder="结束时间"@change="dateChange":teleported="false"/></el-form-item></el-form></div><template #reference><el-button @click="visiblePopover = !visiblePopover">更多搜索</el-button></template></el-popover>
</el-form-item>const projectButton: Ref = ref(null);
let visiblePopover = ref(false);
const showEvent = () => {document.addEventListener("click", hidePanel, false);
};
const hideEvent = () => {document.removeEventListener("click", hidePanel, false);
};
const hidePanel = (e: any) => {if (!projectButton.value.contains(e.target)) {visiblePopover.value = false;hideEvent();}
};

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/387889.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

卷积神经网络(六)---实现 cifar10 分类

cifar10 数据集有60000张图片&#xff0c;每张图片的大小都是 32x32 的三通道的彩色图&#xff0c;一共是10种类别、每种类别有6000张图片&#xff0c;如图4.27所示。 图 4.27 cifar数据集 使用前面讲过的残差结构来处理 cifar10 数据集&#xff0c;可以实现比较高的准确率。 …

麦田物语第十五天

系列文章目录 麦田物语第十五天 文章目录 系列文章目录一、构建游戏的时间系统二、时间系统 UI 制作总结 一、构建游戏的时间系统 在该游戏中我们要构建年月日天时分秒等时间的概念&#xff0c;从而实现季节的更替&#xff0c;昼夜的更替等&#xff08;不同的季节可以播种不同…

【MATLAB源码】机器视觉与图像识别技术实战示例文档---鱼苗面积预测计数

系列文章目录 第一篇文章&#xff1a;【MATLAB源码】机器视觉与图像识别技术—视觉系统的构成(视频与图像格式转换代码及软件下载) 第二篇文章&#xff1a;【MATLAB源码】机器视觉与图像识别技术(2)—图像分割基础 第三篇文章&#xff1a;【MATLAB源码】机器视觉与图像识别技术…

提交高通量测序处理数据到 GEO --- 操作流程

❝ 写在前面 由于最近在提交课题数据到 NCBI 数据库&#xff0c;整理了相关笔记。本着自己学习、分享他人的态度&#xff0c;分享学习笔记&#xff0c;希望能对大家有所帮助。推荐先按顺序阅读往期内容&#xff1a; 1. 提交高通量测序数据到 GEO --- 说明书 2. 提交高通量测序原…

jQuery前端网页制作

1、Jquery的概述 1.1JavaScript库 JavaScript 高级程序设计(特别是对浏览器差异的复杂处理),通常很困难也很耗时。 为了应对这些调整,许多的 JavaScript (helper) 库应运而生。 这些 JavaScript 库常被称为 JavaScript 框架。 市面上一些广受欢迎的 JavaScript 框架:…

基于Docker搭建ELK

目录 1.系统操作 2.搭建es 3.kibana(新起终端跟es一起启动) 4.logstash&#xff08;新起终端和es一起启动&#xff09; 5.修改logstash配置文件 6. 创建索引 7. exit #退出容器 8. 在logstash节点插入数据&#xff0c;测试是否能拿取到&#xff08;下面如果本身有数据…

基于多种机器学习的豆瓣电影评分预测与多维度可视化【可加系统】

有需要本项目的代码或文档以及全部资源&#xff0c;或者部署调试可以私信博主 在本研究中&#xff0c;我们采用Python编程语言&#xff0c;利用爬虫技术实时获取豆瓣电影最新数据。通过分析豆瓣网站的结构&#xff0c;我们设计了一套有效的策略来爬取电影相关的JSON格式数据。…

[FBCTF2019]RCEService (PCRE回溯绕过和%a0换行绕过)

json格式输入ls出现index.php 这道题原本是给了源码的&#xff0c;BUUCTF没给 源码&#xff1a; <?phpputenv(PATH/home/rceservice/jail);if (isset($_REQUEST[cmd])) {$json $_REQUEST[cmd];if (!is_string($json)) {echo Hacking attempt detected<br/><br/…

ElasticSearch学习篇15_《检索技术核心20讲》进阶篇之TopK检索

背景 学习极客实践课程《检索技术核心20讲》https://time.geekbang.org/column/article/215243&#xff0c;文档形式记录笔记。 相关问题&#xff1a; ES全文检索是如何进行相关性打分的&#xff1f;ES中计算相关性得分的时机?如何加速TopK检索&#xff1f;三种思路 精准To…

eclipse ui bug

eclipse ui bug界面缺陷&#xff0c;可能项目过多&#xff0c;特别maven项目过多&#xff0c;下载&#xff0c;自动编译&#xff0c;加载更新界面异常 所有窗口死活Restore不回去了 1&#xff09;尝试创建项目&#xff0c;还原界面&#xff0c;失败 2&#xff09;关闭所有窗口&…

Python写UI自动化--playwright(pytest.ini配置)

在 pytest.ini 文件中配置 playwright 的选项可以更好地控制测试执行的过程。 在终端输入pytest --help&#xff0c;可以找到playwright的配置参数 目录 1. --browser{chromium,firefox,webkit} 2. --headed 3. --browser-channelBROWSER_CHANNEL 4. --slowmoSLOWMO 5. …

Photos框架 - 自定义媒体选择器(UI列表)

​​​​​​​Photos框架 - 自定义媒体资源选择器&#xff08;数据部分&#xff09; Photos框架 - 自定义媒体选择器&#xff08;UI列表&#xff09;​​​​​​​ Photos框架 - 自定义媒体选择器&#xff08;UI预览&#xff09; Photos框架 - 自定义媒体选择器&#xff0…

规划决策算法(四)---Frenet坐标系

知乎&#xff1a;坐标系转换 1.Frenet 坐标系 什么是 Frenet 坐标系&#xff1a; 为什么使用 Frenet 坐标系&#xff1a; 通常情况&#xff0c;我们只会关注车辆当前距离左右车道线的距离&#xff0c;来判断是否偏离车道&#xff0c;是否需要打方向盘进行方向微调。而不是基于…

【YashanDB知识库】yasdb jdbc驱动集成BeetISQL中间件,业务(java)报autoAssignKey failure异常

问题现象 BeetISQL中间件版本&#xff1a;2.13.8.RELEASE 客户在调用BeetISQL提供的api向yashandb的表中执行batch insert并将返回sequence设置到传入的java bean时&#xff0c;报如下异常&#xff1a; 问题的风险及影响 影响业务流程正常执行&#xff0c;无法获得batch ins…

matlab仿真 数字信号载波传输(下)

&#xff08;内容源自详解MATLAB&#xff0f;SIMULINK 通信系统建模与仿真 刘学勇编著第七 章内容&#xff0c;有兴趣的读者请阅读原书&#xff09; clear all M8; msg[1 4 3 0 7 5 2 6]; ts0.01; T1; %t0:ts:T; t0:ts:T-ts; %x0:ts:length(msg); x0:ts:length(msg)-ts; f…

决策树基础

概述 决策树是一种树型结构&#xff0c;其中每个内部结点表示在一个属性上的测试&#xff0c;每个分支代表一 个测试输出&#xff0c;每个叶结点代表一种类别。决策树学习采用的是自顶向下的递归方法&#xff0c;其基本思想是以信息熵为度量构造一棵熵值下降最快的树&#xff…

一层5x1神经网络绘制训练100轮后权重变化的图像

要完成这个任务&#xff0c;我们可以使用Python中的PyTorch库来建立一个简单的神经网络&#xff0c;网络结构只有一个输入层和一个输出层&#xff0c;输入层有5个节点&#xff0c;输出层有1个节点。训练过程中&#xff0c;我们将记录权重的变化&#xff0c;并在训练100轮后绘制…

github简单地操作

1.调节字体大小 选择options 选择text 选择select 选择你需要的参数就可以了。 2.配置用户名和邮箱 桌面右键&#xff0c;选择git Bash Here git config --global user.name 用户名 git config --global user.email 邮箱名 3.用git实现代码管理的过程 下载别人的项目 git …

反爬虫限制:有哪些方法可以保护网络爬虫不被限制?

目前&#xff0c;爬虫已经成为互联网数据获取最主流的方式。但为了保证爬虫顺利采集数据&#xff0c;需要防范网站的反爬虫机制&#xff0c;降低IP被限制的风险&#xff0c;这样才能提高爬虫工作的效率。那么&#xff0c;如何防止网络爬虫被限制呢&#xff1f;下面介绍几种有效…

dpdk发送udp报文

dpdk接收到udp报文后&#xff0c;自己构造一个udp报文&#xff0c;将收到的报文中的源mac&#xff0c;目的mac&#xff0c;源ip&#xff0c;目的ip&#xff0c;源端口和目的端口交换下顺序填充到新的udp报文中&#xff0c;报文中的负载数据和收到的udp保持一致。 注&#xff1…