tdesign-react icon indicating copy to clipboard operation
tdesign-react copied to clipboard

fix(rate): 修复Rate组件鼠标移走,未恢复到之前的状态的bug

Open Jon-Millent opened this issue 2 years ago • 1 comments

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 已提供

Jon-Millent avatar Oct 17 '23 06:10 Jon-Millent

这个我们讨论下

uyarn avatar Oct 18 '23 06:10 uyarn