Ant Design Blazor 开发随笔 之 Tag

本专栏文章记录我对Ant Design Blazor项目贡献过程中的一些随笔杂谈，内容比较随心所欲，各位随便看看，如果对各位观众老爷有帮助，还请点👍支持😉。

Ant Design of Blazor 是 Ant Design 的 Blazor 实现，开发和服务于企业级后台产品。

✨ 特性
🌈 提炼自企业级中后台产品的交互语言和视觉风格。
📦 开箱即用的高质量 Razor 组件，可在多种托管方式共享。
💕 支持基于 WebAssembly 的客户端和基于 SignalR 的服务端 UI 事件交互。
🎨 支持渐进式 Web 应用（PWA）
🛡 使用 C# 构建，多范式静态语言带来高效的开发体验。
⚙️ 基于 .NET Standard 2.1/.NET 5，可直接引用丰富的 .NET 类库。
🎁 可与已有的 ASP.NET Core MVC、Razor Pages 项目无缝集成。

文档地址：https://antblazor.com/zh-CN/

背景

tag组件自带有一个删除小按钮，点击后就会删除，但是当前版本存在一些小瑕疵，就是使用者无法阻止这个默认行为。

解决方案

删除按钮的触发事件分为onclosing和onclose两个事件，前一个事件在删除前触发，用户通过事件进行接入关闭过程，后一个事件在关闭后触发

Tag.razor

        @if (Mode == "closeable" || Closable)
        {
            <Icon Type="close" TabIndex="-1" @onclick="CloseTag" />
        }

Tag.razor.cs

        [Parameter]
        public EventCallback<CloseEventArgs<MouseEventArgs>> OnClosing { get; set; }
        [Parameter]
        public EventCallback<MouseEventArgs> OnClose { get; set; }

        private async Task CloseTag(MouseEventArgs e)
        {
            var closeEvent = new CloseEventArgs<MouseEventArgs>(e);
            await this.OnClosing.InvokeAsync(closeEvent);
            if (closeEvent.Cancel == true) return;
            await this.OnClose.InvokeAsync(e);
            this._closed = true;
        }

当点击Icon元素时，触发CloseTag事件，然后先调用OnClosing，这里事件传出一个CloseEventArgs类型的对象。

    public class CloseEventArgs<T> where T : EventArgs
    {
        public CloseEventArgs(T eventArgs)
        {
            EventArgs = eventArgs;
        }

        public T EventArgs { get; set; }
        /// <summary>
        /// 设置为true时取消后续事件
        /// </summary>
        public bool Cancel { get; set; }
    }

作为一个泛型对象，他除了包含原有的事件参数EventArgs外，还增加了Cancel属性。

使用者在OnClosing事件中将Cancel赋值成true，接着根据这个值决定是否执行后续代码。

效果演示

Demo代码

@inject ConfirmService _confirmService

<div>
    <Tag OnClick="onClick">onClick</Tag>
    <Tag Mode="closeable" OnClose="onClose">onClose</Tag>
    <Tag Mode="closeable" OnClosing="async e=>await onClosing(e)" OnClose="onClose">onClosing</Tag>
</div>

@code{
    void onClick()
    {
        Console.WriteLine("onClick");
    }

    async Task onClosing(CloseEventArgs<MouseEventArgs> e)
    {
        Console.WriteLine("onClosing");

        if (await _confirmService.Show("是否关闭", "提示") == ConfirmResult.Cancel)
        {
            e.Cancel = true;//通过Cancel属性决定是否取消关闭
        }
    }

    void onClose()
    {
        Console.WriteLine("onClose");
    }

}