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 中按钮鼠标离开高亮不消失的问题就解决了。 如果对你有帮助,请点赞收藏欧,一路生花~~嘿嘿

相关推荐
pe7er10 分钟前
使用RealFaviconGenerator.net一站式生成各平台兼容 Favicon
前端
用户25191624271112 分钟前
Canvas之贪吃蛇
前端·javascript·canvas
一枚前端小能手14 分钟前
🔥 TypeScript高手都在用的4个类型黑科技
前端·typescript
Elieal18 分钟前
深入浅出:Ajax 与 Servlet 实现前后端数据交互
前端·ajax·servlet
王者鳜錸28 分钟前
VUE+SPRINGBOOT从0-1打造前后端-前后台系统-文章详情、评论、点赞
前端·vue.js·spring boot
乐予吕29 分钟前
别再乱用箭头函数了!JavaScript 三种函数写法的终极指南
前端·javascript·代码规范
雨绸缪29 分钟前
编程之路:我为什么要编程
前端·程序员
一大树33 分钟前
Vue 3 中 `ref` 的“浅监听”行为解析:是误解还是真相?
前端·vue.js
海天胜景34 分钟前
vue3 el-select 加载内容后 触发事件
前端·javascript·vue.js
小高0071 小时前
🚀Promise 全家桶:原理、实现、API、实战,一篇搞定
前端·javascript·面试