20行代码写一个简单 Blazor 时钟组件
1.Blazor入门100天 : 自做一个手势滑动组件2.Blazor入门100天 : 自做一个支持长按事件的按钮组件3.Blazor入门100天 : 身份验证和授权 (6) - 使用 FreeSql orm 管理ids数据4.Blazor入门100天 : 身份验证和授权 (3) - DB改Sqlite5.Blazor入门100天 : 身份验证和授权 (4) - 自定义字段6.Blazor入门100天 : 身份验证和授权 (5) - 本地化资源7.Blazor入门100天 : 身份验证和授权 (2) - 角色/组件/特性/过程逻辑8.Blazor入门100天 : 身份验证和授权 (1) - 建立带身份验证工程9.10分钟做好 Bootstrap Blazor 的表格组件导出 Excel/Word/Html/Pdf10.Blazor组件自做十四 : Blazor FileViewer 文件预览 组件11.Blazor组件自做十二 : Blazor Pdf Reader PDF阅读器 组件 (新版 7.1 移除pdfobject)12.Blazor组件自做十三: VideoPlayer 视频播放器13.Blazor组件自做十二 : Blazor Pdf Reader PDF阅读器 组件(更新)14.Blazor组件自做十一 : File System Access 文件系统访问 组件15.Blazor组件自做十 : 光学字符识别 OCR 组件16.Blazor组件自做九: 用20行代码实现文件上传,浏览目录功能 (3)17.Blazor组件自做九: 用20行代码实现文件上传,浏览目录功能 (2)18.Blazor组件自做九: 用20行代码实现文件上传,浏览目录功能 (1)19.Blazor组件自做八 : 使用JS隔离封装屏幕键盘kioskboard.js组件20.Blazor组件自做五 : 使用JS隔离封装Google地图21.Blazor组件自做四 : 使用JS隔离封装signature_pad签名组件22.Blazor组件自做三 : 使用JS隔离封装ZXing扫码23.Blazor组件自做二 : 使用JS隔离制作手写签名组件24.Blazor组件自做一 : 使用JS隔离封装viewerjs库25.Blazor 子组件交互例子
26.20行代码写一个简单 Blazor 时钟组件
27.Blazor 逐键搜索并动态反馈到url28.Blazor 通过组件虚拟化提高性能29.对于 Blazor 组件虚拟化支持flex-wrap: wrap与网格布局的研究 [一]30.对于 Blazor 组件虚拟化支持flex-wrap: wrap与网格布局的研究 [二]31.对于 Blazor 组件虚拟化支持flex-wrap: wrap与网格布局的研究 [三]群里有些同学询问怎么实现定时刷新界面, 那咱们写点试试看能不能达到需求.
代码比较简单, 就是Task每秒刷新页面. 然后封装为组件实现只局部刷新.
TimerAme.razor
<p>@Label @DateTime.Now.ToLongTimeString()</p>
TimerAme.razor.cs
using Microsoft.AspNetCore.Components;
public partial class TimerAme : ComponentBase, IDisposable
{
[Parameter]
public string Label { get; set; } = "时间:";
private CancellationTokenSource? AutoRefreshCancelTokenSource { get; set; }
protected override void OnInitialized() => worker();
/// <summary>
/// Dispose 方法
/// </summary>
public void Dispose() => AutoRefreshCancelTokenSource = null;
public void worker()
{
AutoRefreshCancelTokenSource = new CancellationTokenSource();
_ = Task.Run(async () =>
{
try
{
while (!(AutoRefreshCancelTokenSource?.IsCancellationRequested ?? true))
{
await InvokeAsync(StateHasChanged);
await Task.Delay(TimeSpan.FromSeconds(1), AutoRefreshCancelTokenSource?.Token ?? new CancellationToken(true));
}
}
catch (TaskCanceledException) { }
});
}
}
使用组件
<TimerAme />
关联项目
FreeSql QQ群:4336577
BA & Blazor QQ群:795206915
Maui Blazor 中文社区 QQ群:645660665
知识共享许可协议
本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。欢迎转载、使用、重新发布,但务必保留文章署名AlexChow(包含链接: https://github.com/densen2014 ),不得用于商业目的,基于本文修改后的作品务必以相同的许可发布。如有任何疑问,请与我联系 。
转载声明
本文来自博客园,作者:周创琳 AlexChow,转载请注明原文链接:https://www.cnblogs.com/densen2014/p/18195194
AlexChow
今日头条 | 博客园 | 知乎 | Gitee | GitHub
合集:
Blazor100
分类:
Blazor
, Blazor / Blazor组件
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· 易语言 —— 开山篇