如何在不使用 JavaScript 的情况下在一段时间不活动后隐藏 Microsoft Blazor 中的鼠标光标？

Question

这里就不多说了。我想要的只是减少来自 Blazor 的 JavaScript 函数调用，让 Blazor 做它应该做的事情，“避免使用 JavaScript”。

Answer 1

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

在 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>

谢谢。希望它能对以后的人有所帮助！

如何在不使用 JavaScript 的情况下在一段时间不活动后隐藏 Microsoft Blazor 中的鼠标光标？

How to hide mouse cursor in Microsoft Blazor after being inactive for sometime without using JavaScript?

css

c#

blazor

.net-5

blazor-webassembly