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;}
}