Jx.Cms开发笔记（五）-文章编辑页面标签设计

标签页的样子

设计思路

与其他输入框一样，存在一个Label标签，由于这里不像其他输入框一样可以直接使用Row标签，所以这里需要额外增加。
使用Tag组件显示所有的标签，我们在Blazor 组件库 BootstrapBlazor 中Tag组件介绍中写过使用方法。
使用AutoComplete组件输入新的标签，我们同样在Blazor 组件库 BootstrapBlazor 中AutoComplete组件介绍中介绍过使用方法。

相关代码

razor:

<label class="form-label">标签</label>
        <div class="row g-3">
            @if (Article.Tags != null)
            {
                foreach (var tag in Article.Tags)
                {
                    <div class="col-auto">
                        <Tag Color="Color.Primary" ShowDismiss="true" OnDismiss="() => TagClose(tag)">@tag</Tag>
                    </div>
                }
            }
            <div class="col-auto">
                <AutoComplete onkeydown="enter_down(event);" ShowLabel="false" Items="@AllTags" IsSelectAllTextOnFocus="true" OnEnterAsync="TagPress"/>
            </div>
        </div>

code:


    private Task TagPress(string value)
    {
        if (value.IsNullOrEmpty() || Article.Tags.Any(x => x == value))
        {
            return Task.CompletedTask;
        }
        
        Article.Tags.Add(value);
        StateHasChanged();
        return Task.CompletedTask;
    }
    
    private Task TagClose(string tagName)
    {
        Article.Tags.Remove(tagName);
        StateHasChanged();
        return Task.CompletedTask;
    }

js:

function enter_down(event) {
    if(event.keyCode == "13") {
        stopDefault(event);
    }
}

function stopDefault(e) {
    //如果提供了事件对象，则这是一个非IE浏览器   
    if(e && e.preventDefault) {
        //阻止默认浏览器动作(W3C)  
        e.preventDefault();
    } else {
        //IE中阻止函数器默认动作的方式   
        window.event.returnValue = false;
    }
    return false;
}

注意事项

由于浏览器行为中如果在一个Form中有且仅有一个类型为Submit的按钮，当在按下回车时，会自动触发提交行为。

这里我们的AutoComplete组件也是使用回车键来触发添加Tag的逻辑，与浏览器默认行为冲突，所以我们要屏蔽掉回车键的onkeydown事件。

但是blazor并不支持单按键的屏蔽逻辑，所以我们只能在这里借助Js来实现。

blazor的razor文件里不能直接写js块，但是可以在标签里直接调用Js方法或者写简单的js语句，如<AutoComplete onkeydown="enter_down(event);" ShowLabel="false" Items="@AllTags" IsSelectAllTextOnFocus="true" OnEnterAsync="TagPress"/>里的onkeydown。