Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
wants to merge 1 commit into
base: develop
Choose a base branch
from

Conversation

Jon-Millent
Copy link
Contributor

fix #2250

🤔 这个 PR 的性质是?

  • 日常 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

☑️ 请求合并前的自查清单

⚠️ 请自检并全部勾选全部选项⚠️

  • 文档无须补充
  • 代码演示无须提供
  • TypeScript 无须补充
  • Changelog 已提供

@uyarn
Copy link
Collaborator

uyarn commented Oct 18, 2023

这个我们讨论下

@uyarn uyarn added the 💭 discussion we are discussing label Oct 18, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
💭 discussion we are discussing
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Rate] hover时,鼠标移走,未恢复到之前的状态
2 participants