tdesign-react
tdesign-react copied to clipboard
fix(rate): 修复Rate组件鼠标移走,未恢复到之前的状态的bug
fix #2250
🤔 这个 PR 的性质是?
- [x] 日常 bug 修复
- [ ] 新特性提交
- [ ] 文档改进
- [ ] 演示代码改进
- [ ] 组件样式/交互改进
- [ ] CI/CD 改进
- [ ] 重构
- [ ] 代码风格优化
- [ ] 测试用例
- [ ] 分支合并
- [ ] 其他
🔗 相关 Issue
fix: #2250 [Rate] hover时,鼠标移走,未恢复到之前的状态
💡 需求背景和解决方案
1、解决了Rate组件,鼠标快速移走,未恢复到之前的状态的bug 解决办法:使用css的hover特性,在rate组件中新增了一个隐藏的元素,元素默认字体大小为0,当hover的时候,改变字体大小,然后让mouseout的时候去延时判断当前的隐藏元素的字体大小,如果为0的时候,说明鼠标移动走了,即需要恢复组件状态。
<span ref={hoverCheckRef} className={`${classPrefix}-rate__hover__check`}></span>
const mouseOutHandler = () => {
if (disabled) return;
// fix: 2250 鼠标移走,未恢复到之前的状态
clearTimeout(checkTimeHandler.current);
checkTimeHandler.current = setTimeout(() => {
const computedStyle = getComputedStyle(hoverCheckRef.current);
const fontSize = computedStyle.getPropertyValue('font-size');
if (fontSize === '0px') {
setHoverValue(undefined);
}
}, 100);
};
注意⚠️:本次改动需要同时在_common项目的rate的样式里面新增以下样式
.@{rate-cls}__hover__check {
display: none;
width: 0;
height: 0;
font-size: 0;
}
&__list:hover + .@{rate-cls}__hover__check {
font-size: 1px;
}
这个还没有提交pr,如果大家认同这个修改方案,我在为_common项目提交样式修改的pr
📝 更新日志
-
fix(rate): 修复Rate组件鼠标移走,未恢复到之前的状态的bug
-
[ ] 本条 PR 不需要纳入 Changelog
☑️ 请求合并前的自查清单
⚠️ 请自检并全部勾选全部选项。⚠️
- [x] 文档无须补充
- [x] 代码演示无须提供
- [x] TypeScript 无须补充
- [x] Changelog 已提供
这个我们讨论下