需求描述
最近遇到这样一个hentai需求:想使用element-ui的多选框tag展示选中项,且支持点击某项进行删除;但需要点击另一个按钮触发弹框进行选择,而非从多选框下拉列表选择。
即:禁用多选框本体的点击事件(点击时不出现下拉列表),但响应多选框里tag的点击事件。
需求分析
本杂鱼隐约记得CSS有这样一个属性:pointer-events,用于设置元素是否对鼠标事件做出反应;设置为“none”时不响应鼠标事件,设置为“auto”时响应鼠标事件。
解决思路
在父元素的样式中设置:
pointer-events: none;
在子元素的样式中设置:
pointer-events: auto;
如果希望保留清除全部选中项的功能,需将el-select的clearable属性设为“true”(默认为false),并设置右侧下拉按钮的样式为不可见但元素存在(会响应鼠标事件,悬浮时变为×图标):
visibility: hidden;
如果不需要清除全部选中项,设置右侧下拉按钮的样式为不可见且元素不存在即可:
display: none;
鼠标“穿透”
pointer-events还可以实现鼠标“穿透”的效果,比如页面中有两个div:A和B,A覆盖在B的上面,那么想要点击B时总会触发A的点击事件。要触发B的点击事件,就可以给A设置pointer-events: none来实现。