网站建设套餐价格域名过期了被别人拿去做违法
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;}
}
