好长时间没继续写这个系列博客了, 不知道大家还记得我吗? 话不多说,直接开撸.
配套源码
1. 新建 net8 blazor 工程 b19LongPressButton
至于用什么模式大家各取所需, 我创建的是ssr单工程, 如果大家不小心建立错了按页面渲染模式,可以在 App.razor 里面改一下, 加入 @rendermode=”RenderMode.InteractiveServer” 这句话, 默认使用ssr模式渲染.
2. ComponentsPages 下新建组件 LongPressButton.razor
@inherits ComponentBase
@ChildContent
@code {
[Inje服务器托管网ct]
private IJSRuntime? JS { get; set; }
[Parameter]
public RenderFragment? ChildContent { get; set; }
///
/// 获得/设置 启用长按
///
[Parameter]
public bool LongPress { get; set; } = true;
///
/// 获得/设置 ContextMenu 菜单项回调委托
///
[Parameter]
public Func? OnContextMenu { get; set; }
///
/// 获得/设置 长按回调委托, 如果启用长按并且不是触摸设备,则回落到 Click 点击时触发
///
[Parameter]
public Func? OnLongPress { get; set; }
///
/// 获得/设置 Click 回调委托
///
[Parameter]
public Func? OnClick { get; set; }
///
/// 获得/设置 长按延时
///
[Parameter]
public int OnTouchTime { get; set; } = 500;
///
/// ContextMenu 菜单项点击时触发
///
///
Task onContextMenu(MouseEventArgs args)
{
if (OnContextMenu != null)
{
return OnContextMenu.Invoke(args);
}
else
{
return Task.CompletedTask;
}
}
///
/// 点击时触发
///
///
Task onClick(MouseEventArgs args)
{
if (OnClick != null)
{
return OnClick.Invoke(args);
}
else if (OnLongPress != null && !IsTouchDevice)
{
return OnLongPress.Invoke(args);
}
else
{
return Task.CompletedTask;
}
}
///
/// 是否触摸设备
///
private bool IsTouchDevice { get; set; }
///
/// 是否触摸
///
private bool TouchStart { get; set; }
///
/// 触摸定时器工作指示
///
private bool IsBusy { get; set; }
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
IsTouchDevice = await JS!.InvokeAsync("eval", $"'ontouchstart' in document.documentElement");
}
}
private async Task OnTouchStart(TouchEventArgs e)
{
if (!IsBusy)
{
IsBusy = true;
TouchStart = true;
// 延时保持 TouchStart 状态
await Task.Delay(OnTouchTime);
if (TouchStart)
{
var args = new MouseEventArgs()
{
ClientX = e.Touches[0].ClientX,
ClientY = e.Touches[0].ClientY,
ScreenX = e.Touches[0].ScreenX,
ScreenY = e.Touches[0].ScreenY,
Type = "LongPress"
服务器托管网 };
// 弹出关联菜单
if (OnContextMenu != null)
await OnContextMenu(args);
if (OnLongPress != null)
await OnLongPress(args);
//延时防止重复激活菜单功能
await Task.Delay(OnTouchTime);
}
IsBusy = false;
}
}
private void OnTouchEnd()
{
TouchStart = false;
}
}
3. 回到首页 Home.razor 添加组件测试
@page "/"
Home
LongPressButton
@message
@code {
string message = "No long press";
private Task TaskOnLongPress(MouseEventArgs e)
{
message = e.Type;
StateHasChanged();
return Task.CompletedTask;
}
}
4. 测试
运行程序
普通浏览器模式, 不支持触摸,会自动会落到点击事件, 点击显示为 Click
F12打开开发者工具, 点击模拟手机/平板, 需要F5刷新页面重新读取是否为触摸设备, 点击无反应, 长按显示为
服务器托管,北京服务器托管,服务器租用 http://www.fwqtg.net
机房租用,北京机房租用,IDC机房托管, http://www.fwqtg.net
接着上一篇继续部署应用到 K8S中 之前简单部署的简单集群,三个工作节点是运行在 docker 和 kubelet 的,还有一个是控制节点 ReplicationController , pod 和 service 本次关系 之前有提到 Replication…