vue elementui select下拉库组件鼠标移出时隐藏下拉框

方案:
select 监听 mouseleave事件,当鼠标离开时通过唯一标识ref设置select 下拉框隐藏,并做失焦

<el-select 
v-model="value" 
:popper-append-to-body="false"   
class="select_drop_inner" size="small"
placeholder="支持模型体验" 
ref="selectRef" 
@mouseleave.native="closeSelect"><el-option label="xxx" value="xxx"></el-option><el-option label="xxx" value="xxx"></el-option>
</el-select>

popper-append-to-body 属性是设置弹出框的位置的,设置为false比较方便我们通过当前select去获取对应的下拉框元素,如果设置为true的话对应下拉框元素会在最外层,不方便拿到并设置
在这里插入图片描述
但是设置当前属性也会导致出现下拉框被盖住不显示的样式问题
如果有这样的样式问题可以给select设置单独的class,然后设置以下的scss

.select_drop_inner {padding-bottom: 0.2rem;  //为下方的下拉框保留位置(20px)position: relative;top: 0.1rem; //兼容之前的样式,可以不加.el-select__tags {top: calc(50% - 0.1rem);}.el-select-dropdown {position: fixed !important;  //主要是修改下拉框为固定定位来解决不显示问题top: 3.2rem !important;  //上方的高度需自己计算(相关整个页面视口)}
}

mouseleave事件方法中做操作

closeSelect(){// 注意 selectRef 要和 ref="selectRef" 对应this.$refs.selectRef.$el.querySelector('.el-select-dropdown').style.display = 'none';// 隐藏下拉框后 同时 使 input 失去焦点this.$refs.selectRef.blur()},

参考至 https://blog.csdn.net/Z18834071903/article/details/138799731

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

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

相关文章

国产操作系统安装DeepSeek

从年前到现在&#xff0c;DeepSeek这款语言AI模型&#xff0c;一经发布直接在全球爆火&#xff0c;在热搜上更是牢牢占据一席之地。无论是技术大神&#xff0c;还是紧跟潮流的技术小白&#xff0c;都被它强大的自然语言处理能力所吸引。作为国产操作系统的用户&#xff0c;千万…

记使用AScript自动化操作ios苹果手机

公司业务需要自动化操作手机&#xff0c;本来以为很困难&#xff0c;没想到使用AScript工具出乎意料的简单&#xff0c;但是还有很多坑存在&#xff0c;写个博客记录一下。 工具信息&#xff1a; 手机&#xff1a;iphone7 系统版本&#xff1a;ios15 AScript官方文档链接&a…

关于conda换镜像源,pip换源

目录 1. 查看当前下载源2. 添加镜像源2.1清华大学开源软件镜像站2.2上海交通大学开源镜像站2.3中国科学技术大学 3.删除镜像源4.删除所有镜像源&#xff0c;恢复默认5.什么是conda-forge6.pip换源 1. 查看当前下载源 conda config --show channels 如果发现多个 可以只保留1个…

Springboot 中如何使用Sentinel

在 Spring Boot 中使用 Sentinel 非常方便&#xff0c;Spring Cloud Alibaba 提供了 spring-cloud-starter-alibaba-sentinel 组件&#xff0c;可以快速将 Sentinel 集成到你的 Spring Boot 应用中&#xff0c;并利用其强大的流量控制和容错能力。 下面是一个详细的步骤指南 …

ARM Cortex-M3/M4 权威指南 笔记【一】技术综述

一、Cortex-M3/M4 处理器的一般信息 1.1 处理器类型 ARM Cortex-M 为 32 位 RISC&#xff08;精简指令集&#xff09;处理器&#xff0c;其具有&#xff1a; 32位寄存器32位内部数据通路32位总线接口 除了 32 位数据&#xff0c;Cortex-M 处理器&#xff08;以及其他任何 A…

(一)Axure制作移动端登录页面

你知道如何利用Axure制作移动端登录页面吗&#xff1f;Axure除了可以制作Web端页面&#xff0c;移动端也是可以的哦&#xff0c;下面我们就一起来看一下Axure制作移动端登录页面的过程吧。 第一步&#xff1a;从元件中拖入一个矩形框&#xff0c;并设置其尺寸为&#xff1a;37…

InfiniBand与IP over InfiniBand(IPOIB):实现高性能网络通信的底层机制

在现代高性能计算(HPC)和数据中心环境中,网络通信的效率和性能至关重要。InfiniBand(IB)作为一种高性能的串行计算机总线架构,以其低延迟、高带宽和高可靠性而广泛应用于集群计算和数据中心。IP over InfiniBand(IPOIB)则是在InfiniBand网络上实现IP协议的一种方式,它…

HTML 链接

HTML 链接 引言 HTML&#xff08;超文本标记语言&#xff09;是构建网页的基础&#xff0c;而链接是网页中不可或缺的元素。链接不仅能够连接到其他网页&#xff0c;还能实现网页内部内容的跳转。本文将详细介绍HTML链接的用法、属性以及如何实现链接的优化。 HTML链接的基本…

C#的DataTable类精简汇总

目录 一、DataTable概述 1.创建 DataTable 2.添加行 3.修改行 4.删除行 5.查询行 6.排序行 7.合并 DataTable 8.克隆 DataTable 9.复制 DataTable 10.使用 DataView 过滤和排序 11.使用 DataTable 的事件 12.使用 DataTable 的约束 13.使用 DataTable 的表达式列 …

RAG评估方法RAGAS的langchain实现-3

Useful Context Precision 在RAG系统评估场景下&#xff0c;“计算RAG返回有效文档的平均top-k命中率” 旨在衡量系统检索相关信息的能力&#xff0c;在只有一次查询的情况下&#xff0c;具体解释如下&#xff1a; 背后直觉&#xff1a;在实际运用RAG系统进行单次查询时&…

变化检测相关论文可读list

一些用得上的&#xff1a; 遥感变化检测常见数据集https://github.com/rsdler/Remote-Sensing-Change-Detection-Dataset/ 代码解读&#xff1a;代码解读 | 极简代码遥感语义分割&#xff0c;结合GDAL从零实现&#xff0c;以U-Net和建筑物提取为例 NeurIPS2024: https://mp.w…

从深入理解 netty——》AI

想了很久&#xff0c;准备写一个系列从深入理解 netty——》AI。 先说下为啥要从netty开始&#xff0c;看看netty的重要性 rocketmq异步消息组件nacos微服务注册中心spring cloud gateway网关redission分布式缓存es全文检索sentinel流量控制&#xff0c;服务保护seata分布式…

集成学习(一):从理论到实战(附代码)

一、引言 在机器学习领域&#xff0c;打造一个独立、强大的算法是解决问题的关键。然而&#xff0c;集成学习提供了一种不同的视角&#xff1a;通过组合多个“弱”学习器来创建一个更强大的模型。本文探讨集成学习的思想、方法及其应用。 二、机器学习 vs 集成学习思想 传统…

Auto-go 环境配置

go环境配置 1.下载 Go 安装包 从 Go 官方网站&#xff08;https://golang.org/dl/&#xff09;下载适合你操作系统的 Go 安装包。不过由于网络原因&#xff0c;可能访问官方网站不太方便可以用我这里的链接Go安装包下载地址点击自动下载 2.下载ide这里使用GoLand 官方网站 …

如何在 Elasticsearch 中设置向量搜索 - 第二部分

作者&#xff1a;来自 Elastic Valentin Crettaz 了解如何在 Elasticsearch 中设置向量搜索并执行 k-NN 搜索。 本文是三篇系列文章中的第二篇&#xff0c;深入探讨了向量搜索&#xff08;也称为语义搜索&#xff09;的复杂性以及它在 Elasticsearch 中的实现方式。 第一部分重…

Leetcode - 周赛435

目录 一、3442. 奇偶频次间的最大差值 I二、3443. K 次修改后的最大曼哈顿距离三、3444. 使数组包含目标值倍数的最少增量四、3445. 奇偶频次间的最大差值 II 一、3442. 奇偶频次间的最大差值 I 题目链接 本题使用数组统计字符串 s s s 中每个字符的出现次数&#xff0c;然后…

SQLMesh系列教程-2:SQLMesh入门项目实战(上篇)

假设你已经了解SQLMesh是什么&#xff0c;以及其他应用场景。如果没有&#xff0c;我建议你先阅读《SQLMesh系列教程-1&#xff1a;数据工程师的高效利器-SQLMesh》。 在本文中&#xff0c;我们将完成一个小项目或教程&#xff0c;以帮助你开始使用SQLMesh。你可以选择一步一步…

【xdoj-离散线上练习H】T234(C++)

解题心得&#xff1a; 写递归函数的时候&#xff0c;首先写终止条件&#xff0c;这有助于对整个递归函数的把握。 题目&#xff1a;输入集合A和B&#xff0c;输出A到B上的所有函数。 问题描述 给定非空数字集合A和B&#xff0c;求出集合A到集合B上的所有函数。 输入格式 第一行…

基础连接已经关闭: 服务器关闭了本应保持活动状态的连接

您在进行 HTTP 请求时遇到“基础连接已经关闭: 服务器关闭了本应保持活动状态的连接”的错误&#xff0c;这通常与连接的保持活动&#xff08;Keep-Alive&#xff09;设置有关。以下是可能的原因和解决方法&#xff1a; 可能的原因&#xff1a; Keep-Alive 设置&#xff1a; 默…

MybatisPlus常用增删改查

记录下MybatisPlus的简单的增删改查 接口概述 Service和Mapper区别 Mapper简化了单表的sql操作步骤&#xff08;CRUD&#xff09;&#xff0c;而Serivce则是对Mapper的功能增强。 Service虽然加入了数据库的操作&#xff0c;但还是以业务功能为主&#xff0c;而更加复杂的SQL…