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 的样式来定位是哪个属性

css 复制代码
:deep(.ant-btn:hover){
    color:red
  }
  :deep(.ant-btn:focus){
    color:green
  }

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

解决问题:

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

实际应用:

  1. 给 通过ref进行标记
ini 复制代码
  <a-button  ref="btnRef"  @mouseup="handleMouseUp()" > </a-button>
  1. 在mouseup时,通过blur()方法移除focus
ini 复制代码
	cosnt btnRef = ref(null)
 	const handleMouseUp = () => {
		btnRef.value?.$el?.blur();
	}

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

相关推荐
祈祷苍天赐我java之术3 小时前
CSS 进阶用法
前端·css
2501_915106326 小时前
移动端网页调试实战,iOS WebKit Debug Proxy 的应用与替代方案
android·前端·ios·小程序·uni-app·iphone·webkit
柯南二号7 小时前
【大前端】React Native 调用 Android、iOS 原生能力封装
android·前端·react native
睡美人的小仙女1278 小时前
在 Vue 前端(Vue2/Vue3 通用)载入 JSON 格式的动图
前端·javascript·vue.js
yuanyxh8 小时前
React Native 初体验
前端·react native·react.js
程序视点9 小时前
2025最佳图片无损放大工具推荐:realesrgan-gui评测与下载指南
前端·后端
程序视点10 小时前
2023最新HitPaw免注册版下载:一键去除图片视频水印的终极教程
前端
小只笨笨狗~11 小时前
el-dialog宽度根据内容撑开
前端·vue.js·elementui
weixin_4903543411 小时前
Vue设计与实现
前端·javascript·vue.js
烛阴13 小时前
带你用TS彻底搞懂ECS架构模式
前端·javascript·typescript