网站建设开票内容,网站建设策划框架,推荐购物网站建设,wordpress get_optionel-select 可搜索多选状态遮挡住搜索框 最近在使用 element-ui 中 el-select组件遇到一个问题#xff0c; 我们需求可以多选#xff0c;也可以输入搜索#xff0c; 当鼠标在边框时才是输入搜索状态#xff0c;通过下面gif动图可发现鼠标经过边框时#xff0c;才显示清空图…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设置该属性为它的默认值查看更多initialinherit从父元素继承该属性 查看更多 inherit
看到这里就明白了 只需给 x 号添加pointer-events: auto即可解决
至此问题完美解决
完整代码
.el-select__tags {pointer-events: none;.el-tag__close {pointer-events: auto;}
}
