当前位置: 首页 > 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;}
}
http://www.lryc.cn/news/465230.html

相关文章:

  • el-table中实现可选表格区域的鼠标事件检测
  • 特种作业操作登高架设作业历年真题附答案
  • schedule-执行周期性任务
  • python图片文件路径排序
  • ARTTrack6/M、ARTTrack5、ART AT7-80横向对比
  • 【Vue】Vue3.0(十三)中标签属性ref(加在普通标签上、加在组件标签上)、局部样式
  • Linux系统基础-文件系统
  • 机器学习和深度学习常用的工具库
  • 【unity小技巧】Unity6 LTS版本安装和一些修改和新功能使用介绍
  • 5种边界填充
  • 鸿蒙网络编程系列7-TLS安全数据传输单向认证示例
  • LangGraph 源码分析 | BaseTool 模板类
  • vulnhub靶场之JOY
  • intel和AMD突然联姻,这操作给我看傻了
  • yolo_face_pose-DataBall 人脸关键点数据集 >> DataBall
  • Unity 山水树木
  • Redis 性能优化选择:Pika 的配置与使用详解
  • 【某农业大学计算机网络实验报告】实验三 IP数据报发送和转发流程
  • Android13 添加运行时权限
  • 官方操刀占用仅6G,Win 11 LTSC详细安装、优化教程来了
  • 【论文精读】RELIEF: Reinforcement Learning Empowered Graph Feature Prompt Tuning
  • 2023-06 GESP C++三级试卷
  • Maven--简略
  • leetcode 刷题day44动态规划Part13( 647. 回文子串、516.最长回文子序列)
  • 华为OD机试真题---关联子串
  • 【OpenAI】第二节(Token)什么是Token?如何计算ChatGPT的Token?
  • GraphRAG + Ollama + Groq 构建知识库 续篇 利用neo4j显示知识库
  • 工业以太网之战:EtherCAT是如何杀出重围的?
  • 轻量级可视化数据分析报表,分组汇总表!
  • 初始Python篇(4)—— 元组、字典