Ant Design Vue （2x） 按钮（button）单击后离开，按钮状态无变化 - 教程

Ant Design Vue （2x） 按钮（button）单击后离开，按钮状态无变化

场景：

使用Ant Design 2x 开发，在使用<a-button> 时，鼠标浮上，按钮高亮，摁下后依然高亮，鼠标松开并离开后高亮依然显示。

问题：

上面的场景与我想要的不一样，鼠标浮上和摁下后高亮是我们需要的，但是我鼠标都松开而且离开按钮了，你还高亮，这就有问题了啊。
时间证明这的确是一个问题，因为我发现在后面的版本 4x 中这个问题已经被解决了。

解决方案：

1. 更新版本到 4x，但是对于一个项目来说，UI库的版本更新，会存在很多隐藏的问题。
2. 自己解决。

我的方案：

我经过更新版本的风险评估后，感觉我还是自己解决更安全一些，承担不了更新后出现的不确定性问题带来的后果。

分析问题：

鼠标离开按钮后，高亮没有消失，两种情况

1. hover样式一直存在
2. focus样式一直存在

定位问题：

通过分别设置 :hover 和 :focus 的样式来定位是哪个属性

:deep(.ant-btn:hover){
color:red
}
:deep(.ant-btn:focus){
color:green
}

经过实验发现,是鼠标松开离开后，focus属性依然存在

解决问题：

在鼠标松开后，手动移除Ant Design 库中 的focus属性

实际应用：

1. 给 通过ref进行标记

2. 在mouseup时，通过blur()方法移除focus

cosnt btnRef = ref(null)
const handleMouseUp = () => {
btnRef.value?.$el?.blur();
}

经过上如设置，Ant Design 中按钮鼠标离开高亮不消失的问题就解决了。
如果对你有帮助，请点赞收藏欧，一路生花~~嘿嘿