当前位置: 首页 > news >正文

el-select 可搜索、多选状态遮挡住搜索框

el-select 可搜索多选状态遮挡住搜索框

最近在使用 element-ui 中 el-select组件遇到一个问题,
我们需求可以多选,也可以输入搜索,
当鼠标在边框时才是输入搜索状态,通过下面gif动图可发现鼠标经过边框时,才显示清空图标 并且鼠标无法点中清空图标

经过调试发现,内部的el-select__tag所在 div 充满了整行元素导致鼠标无法聚焦到 input 所在元素,
发现问题就好解决了,
经过一番百度折腾
发现有人说添加pointer-events: none可以解决,抱着试一试的心理试试
el-select__tag元素添加pointer-events: none发现鼠标能成功聚焦到输入框
问题解决, 提交代码

不久后测试反馈 无法点击 x 号来清空内容了,

啊啊啊啊啊啊!天要塌了

然后又是一番排查,发现 pointer-events: none导致el-tag__close元素事件不起作用,
此时百度pointer-events属性看起作用;

pointer-events

pointer-events 属性用于设置元素是否对鼠标事件做出反应。

属性值描述
auto默认值,设置该属性链接可以正常点击访问。
none元素不能对鼠标事件做出反应
initial设置该属性为它的默认值,查看更多initial
inherit从父元素继承该属性, 查看更多 inherit

看到这里就明白了 只需给 x 号添加pointer-events: auto即可解决

至此问题完美解决

完整代码

.el-select__tags {pointer-events: none;.el-tag__close {pointer-events: auto;}
}

相关文章:

el-select 可搜索、多选状态遮挡住搜索框

el-select 可搜索多选状态遮挡住搜索框 最近在使用 element-ui 中 el-select组件遇到一个问题, 我们需求可以多选,也可以输入搜索, 当鼠标在边框时才是输入搜索状态,通过下面gif动图可发现鼠标经过边框时,才显示清空图…...

el-table中实现可选表格区域的鼠标事件检测

背景描述 vue3element plus想要实现el-table中特定区域内的单元格才可点击 代码实现 首先&#xff0c;需要给el-table绑定单元格点击事件 <el-table :data"currTableData"borderstyle"width: 100%;"height"calc(100vh - 400px)"cell-clic…...

特种作业操作登高架设作业历年真题附答案

1.直接引起坠落的客观危险因素之平均温度低于&#xff08; &#xff09;℃。 A.10 B.3 C.5 答案:C 2.从事脚手架支搭作业的人员必须年满&#xff08; &#xff09;周岁。 A.18 B.20 C.22 答案:A 3.跨越架横杆有效部分的小头直径不…...

schedule-执行周期性任务

模块介绍 该模块主要用于python的任务调度&#xff0c;使用简便友好的python语法定期运行python函数或者一些其他的调用对象&#xff0c;这个模块就类似于windows的任务计划和linux的crontab&#xff0c;都是用于在服务器上周期性执行某段python脚本。 相较于linux的crontab对…...

python图片文件路径排序

解决用sord 排序文件路径乱序问题&#xff1a; image_files 是 图片文件路径列表[pythonProject/video2img/1.jpg,pythonProject/video2img/2.jpg,.......] image_files.sort(keylambda x: int(x.split(/)[-1].split(.)[0]))...

ARTTrack6/M、ARTTrack5、ART AT7-80横向对比

在光学跟踪系统领域&#xff0c;ART公司凭借其先进的技术和卓越的产品性能&#xff0c;一直受到市场的广泛关注。ARTTrack6/M、ARTTrack5和ART AT7-80作为ART公司的三款代表性产品&#xff0c;各自在不同的应用场景中发挥着重要作用。本文将对这三款产品进行纵向对比&#xff0…...

【Vue】Vue3.0(十三)中标签属性ref(加在普通标签上、加在组件标签上)、局部样式

上篇文章&#xff1a; 【Vue】Vue3.0 &#xff08;十二&#xff09;、watchEffect 和watch的区别及使用 &#x1f3e1;作者主页&#xff1a;点击&#xff01; &#x1f916;Vue专栏&#xff1a;点击&#xff01; ⏰️创作时间&#xff1a;2024年10月18日20点56分 文章目录 基本…...

Linux系统基础-文件系统

个人主页&#xff1a;C忠实粉丝 欢迎 点赞&#x1f44d; 收藏✨ 留言✉ 加关注&#x1f493;本文由 C忠实粉丝 原创 Linux系统基础-文件系统 收录于专栏[Linux学习] 本专栏旨在分享学习Linux的一点学习笔记&#xff0c;欢迎大家在评论区交流讨论&#x1f48c; 目录 1. 回顾C语言…...

机器学习和深度学习常用的工具库

一、机器学习常用库 1. Scikit-learn 简介&#xff1a;一个基于Python的机器学习库&#xff0c;专注于经典的机器学习算法。特点&#xff1a; 提供了多种分类、回归、聚类和降维算法。具有统一的API&#xff0c;便于使用。集成了数据预处理、模型选择和评估等功能。 应用&…...

【unity小技巧】Unity6 LTS版本安装和一些修改和新功能使用介绍

文章目录 前言安装新功能变化1、官方推荐使用inputsystem进行输入控制2、修复了InputSystem命名错误导致listen被遮挡的bug3、自带去除unity启动画面logo功能4、unity官方的behavior行为树插件5、linearVelocity代替过时的velocity方法待续 完结 前言 2024/10/17其实unity就已…...

5种边界填充

目录 边界填充需要知道的两个东西什么算边界边界的范围是多少举例 复制填充反射法反射101法外包装法数值填充法原图代码最终效果 边界填充需要知道的两个东西 什么算边界 顾名思义&#xff1a;就是图片的最外边 边界的范围是多少 根据你自己的需要而设置 举例 这里我选择…...

鸿蒙网络编程系列7-TLS安全数据传输单向认证示例

1.TLS简介 TLS&#xff08;Transport Layer Security&#xff09;协议的前身是SSL&#xff08;Secure Socket Layer&#xff09;安全套接层协议&#xff0c;由Netscape公司于1994年提出&#xff0c;是一套网络通信安全协议。IETF&#xff08;The Internet Engineering Task Fo…...

LangGraph 源码分析 | BaseTool 模板类

文章目录 BaseTool 源码分析核心属性以 TavilySearchResults(BaseTool) 为例namedescriptionargs_schemaresponse_format查询选项属性 需要子类实现的抽象方法以 TavilySearchResults(BaseTool) 为例 核心方法arun()&#xff1a;run()的异步执行版本invoke()和ainvoke() BaseTo…...

vulnhub靶场之JOY

一.环境搭建 1.靶场描述 Does penetration testing spark joy? If it does, this machine is for you. This machine is full of services, full of fun, but how many ways are there to align the stars? Perhaps, just like the child in all of us, we may find joy in …...

intel和AMD突然联姻,这操作给我看傻了

要说现在的显卡一哥&#xff0c;那肯定非 NVIDIA 莫属&#xff0c;不仅仅是在 AI 领域是赚的盆满钵满&#xff0c;更是在游戏显卡领域把红蓝两家打的节节败退。 在 6000 系列尚能与之一战的 AMD 也认清了现实&#xff0c;在最近宣布了下一代 8000 系列显卡放弃高端显卡战争&…...

yolo_face_pose-DataBall 人脸关键点数据集 >> DataBall

数据集下载地址&#xff1a;ultralyticsyolo训练自定义人脸关键点训练和验证数据集资源-CSDN文库 数据集定义&#xff1a; ultralytics yolo 训练自定义人脸关键点训练和验证数据集 数据集格式&#xff1a;yolo 训练集数量&#xff1a;3295 验证集数量&#xff1a;120 类别&a…...

Unity 山水树木

本章节内容 1. Unity对3D游戏物体的简单操作&#xff1b; 2. 构建山水树木的场景 1. Unity 简易操作 1.1 新建3D游戏场景 1. 打开Unity Hub&#xff0c;点击 New Project &#xff08;新建项目&#xff09;按键&#xff0c;选择第二项 3D(Built-In Render Pipeline)&#xf…...

Redis 性能优化选择:Pika 的配置与使用详解

引言 在我们日常开发中 redis是我们开发业务场景中不可缺少的部分。Redis 凭借其内存存储和快速响应的特点&#xff0c;广泛应用于缓存、消息队列等各种业务场景。然而&#xff0c;随着数据量的不断增长&#xff0c;单节点的 Redis 因为内存限制和并发能力的局限&#xff0c;逐…...

【某农业大学计算机网络实验报告】实验三 IP数据报发送和转发流程

实验目的&#xff1a; &#xff08;1&#xff09;掌握基本的网络配置方法。 &#xff08;2&#xff09;观察 IP 数据报的发送和转发流程&#xff0c;掌握 IP 转发分组的原理。 实验器材&#xff1a; 一台Windows操作系统的PC机。 实验准备&#xff1a; 1&#xff0e;配置…...

Android13 添加运行时权限

在一些场景下&#xff0c;需要给app 添加运行时权限&#xff0c;这样就不需要在使用的时候再去点击授权。 直接上代码&#xff1a; --- a/services/core/java/com/android/server/pm/permission/DefaultPermissionGrantPolicy.javab/services/core/java/com/android/server/pm…...

别再死记硬背了!用Python+Simulink仿真液压系统,帮你彻底搞懂帕斯卡原理和伯努利方程

用Python和Simulink仿真液压系统&#xff1a;从理论到实践的沉浸式学习 液压传动作为现代机械工程的核心技术之一&#xff0c;其理论基础往往让初学者望而生畏。帕斯卡原理、伯努利方程这些看似简单的公式背后&#xff0c;隐藏着复杂的物理现象和工程应用。传统的死记硬背方式不…...

保姆级教程:在Ubuntu 22.04上搞定DCU-Z100(ZiFang)驱动安装与验证

保姆级教程&#xff1a;在Ubuntu 22.04上搞定DCU-Z100&#xff08;ZiFang&#xff09;驱动安装与验证 国产DCU&#xff08;Deep Computing Unit&#xff09;正逐渐成为高性能计算领域的新选择&#xff0c;而DCU-Z100&#xff08;代号ZiFang&#xff09;作为其中的代表产品&…...

28V,1.5A,XU1619,升压LED恒流驱动芯片 输入电压:2.5V-5.5V

概述 这是一款恒频电流模式升压转换器&#xff0c;适用于小型、低功耗应用。内部软启动功能可以减少涌入电流。1.2MHz的固定开关频率运行&#xff0c;可以使用小型外部组件。可以在5V电源输入下产生100mA的28V电压。有欠压保护、限流、热过载保护。特点 ●输入电压范围&#xf…...

Tina Linux音频开发指南:从ALSA框架到实战调试

1. 项目概述&#xff1a;为什么我们需要一份音频开发指南&#xff1f;在嵌入式Linux的世界里&#xff0c;音频开发常常被开发者们戏称为“玄学”。我见过太多项目&#xff0c;硬件电路设计得漂漂亮亮&#xff0c;系统也跑得飞快&#xff0c;但一到音频部分就卡壳——要么是播放…...

当贝盒子H5 64G版618首销TOP1!多平台登顶,凭什么这么火?

2026年5月14日&#xff0c;当贝官方发布了618抢先购首日当贝盒子H5 64G版的首销战报。据官方数据显示&#xff0c;这款重磅升级的电视盒子在京东、天猫、抖音三大主流电商平台的电视盒子类目热销榜中&#xff0c;全部拿下TOP1席位&#xff0c;成为今年618大促第一天的现象级爆款…...

从VBS到VBE:一次搞懂Windows脚本编码器的前世今生与实战避坑

从VBS到VBE&#xff1a;Windows脚本编码器的技术考古与安全实践 在Windows系统管理的工具箱里&#xff0c;VBScript&#xff08;VBS&#xff09;曾经是自动化任务的瑞士军刀。尽管如今PowerShell和现代编程语言已成为主流&#xff0c;但理解VBScript及其编码器&#xff08;VBE&…...

保姆级教程:在Qt 6.5桌面应用中集成WebRTC实现一对一视频通话(附完整源码)

Qt 6.5与WebRTC深度整合实战&#xff1a;构建企业级视频通话解决方案 1. 环境配置与依赖管理 在开始Qt 6.5与WebRTC的集成之旅前&#xff0c;我们需要搭建一个稳定的开发环境。不同于普通的Qt项目&#xff0c;这种集成对工具链和系统配置有特殊要求。 推荐开发环境配置&…...

别再怕模型不准了!用MATLAB的musyn命令搞定鲁棒控制器设计(附D-K迭代详解)

用MATLAB的musyn命令实现工业级鲁棒控制器设计实战指南 在控制系统的实际工程应用中&#xff0c;模型不确定性就像房间里的大象——人人都知道存在&#xff0c;却常常选择忽视。直到某天&#xff0c;精心设计的控制器在真实环境中表现失常&#xff0c;工程师们才意识到那些被忽…...

利用Taotoken CLI工具一键配置多开发环境与团队协作密钥

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 利用Taotoken CLI工具一键配置多开发环境与团队协作密钥 基础教程类&#xff0c;指导团队负责人或希望简化配置流程的开发者使用Ta…...

Typora LaTeX主题:学术论文写作的终极解决方案

Typora LaTeX主题&#xff1a;学术论文写作的终极解决方案 【免费下载链接】typora-latex-theme 将Typora伪装成LaTeX的中文样式主题&#xff0c;本科生轻量级课程论文撰写的好帮手。This is a theme disguising Typora into Chinese LaTeX style. 项目地址: https://gitcode…...