时间戳

首页 > 解决方案 > 在不使用 JavaScript 一段时间后，如何在 Microsoft Blazor 中隐藏鼠标光标？

c# - 在不使用 JavaScript 一段时间后，如何在 Microsoft Blazor 中隐藏鼠标光标？

问题描述

这里没有太多描述。我想要的只是减少来自 Blazor 的 JavaScript 函数调用，让 Blazor 完成它的用途，“避免使用 JavaScript”。

标签： c#cssblazor.net-5blazor-webassembly

解决方案

因此，在这里回答只是为了帮助未来寻求类似问题的人，而无需使用复杂的编码。

在 Index.razor 文件或您选择的要隐藏鼠标光标的组件中，输入以下代码。

private bool _showMouse;
private static Timer _timer = new(_timerDuration);
private static double _timerDuration = 5000; //In my case, I wanted to hide after five seconds.

protected override async Task OnInitializedAsync()
{
    _timer.Start();
}

protected override async Task OnAfterRenderAsync(bool firstRender) 
{
    if (firstRender)
    {    
        _timer.Elapsed += (sender, args) =>
        {
            _showMouse = false;
            StateHasChanged();
        };
    }
}

private void OnMouseMove(MouseEventArgs e)
{
      _showMouse = true;
      _timer.Interval = 5000;
}

将此添加到根元素的内联样式中，您希望在指定的不活动时间后隐藏鼠标。

<div @onmousemove="OnMouseMove" style="cursor: @(_showMouse ? "unset" : "none");">
  ...
  .
  .
  ...
</div>

谢谢你。希望它可以帮助将来的人！

推荐阅读