Blazor入门100天 : 自做一个支持长按事件的按钮组件

BlazorSSR项目中的长按按钮组件及其交互实现

最新推荐文章于 2025-08-05 09:06:46 发布

原创

最新推荐文章于 2025-08-05 09:06:46 发布 · 551 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#wasm #bootstrap

本文介绍了如何在Blazor.NET8单工程中创建一个支持长按、点击和触控事件的LongPressButton组件，并在SSR模式下实现其功能，包括处理点击、长按时的回调和触摸设备检测。

好长时间没继续写这个系列博客了, 不知道大家还记得我吗? 话不多说,直接开撸.

配套源码

demo https://blazor.app1.es/b19LongPressButton

####1. 新建 net8 blazor 工程 b19LongPressButton

至于用什么模式大家各取所需, 我创建的是ssr单工程, 如果大家不小心建立错了按页面渲染模式,可以在 App.razor 里面改一下, 加入 @rendermode=“RenderMode.InteractiveServer” 这句话, 默认使用ssr模式渲染.

<Routes @rendermode="RenderMode.InteractiveServer" />

####2. Components\Pages 下新建组件 LongPressButton.razor

@inherits ComponentBase

<div @onclick="onClick" @oncontextmenu="onContextMenu" @ontouchstart="OnTouchStart" @ontouchend="OnTouchEnd">
    @ChildContent
</div>


@code {


    [Inject]
    private IJSRuntime? JS { get; set; }

    [Parameter]
    public Render