Ant Design Vue (2x) 按钮(button)单击后离开,按钮状态无变化
场景:
使用Ant Design 2x 开发,在使用<a-button>
时,鼠标浮上,按钮高亮,摁下后依然高亮,鼠标松开并离开后高亮依然显示。
问题:
上面的场景与我想要的不一样,鼠标浮上和摁下后高亮是我们需要的,但是我鼠标都松开而且离开按钮了,你还高亮,这就有问题了啊。 时间证明这的确是一个问题,因为我发现在后面的版本 4x 中这个问题已经被解决了。
解决方案:
- 更新版本到 4x,但是对于一个项目来说,UI库的版本更新,会存在很多隐藏的问题。
- 自己解决。
我的方案:
我经过更新版本的风险评估后,感觉我还是自己解决更安全一些,承担不了更新后出现的不确定性问题带来的后果。
分析问题:
鼠标离开按钮后,高亮没有消失,两种情况
- hover样式一直存在
- focus样式一直存在
定位问题:
通过分别设置 :hover 和 :focus 的样式来定位是哪个属性
css
:deep(.ant-btn:hover){
color:red
}
:deep(.ant-btn:focus){
color:green
}
经过实验发现,是鼠标松开离开后,focus属性依然存在
解决问题:
在鼠标松开后,手动移除Ant Design 库中 的focus属性
实际应用:
- 给 通过ref进行标记
ini
<a-button ref="btnRef" @mouseup="handleMouseUp()" > </a-button>
- 在mouseup时,通过blur()方法移除focus
ini
cosnt btnRef = ref(null)
const handleMouseUp = () => {
btnRef.value?.$el?.blur();
}
经过上如设置,Ant Design 中按钮鼠标离开高亮不消失的问题就解决了。 如果对你有帮助,请点赞收藏欧,一路生花~~嘿嘿