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

标签页的样子

设计思路

1. 与其他输入框一样，存在一个Label标签，由于这里不像其他输入框一样可以直接使用Row标签，所以这里需要额外增加。

2. 使用Tag组件显示所有的标签，我们在Blazor 组件库 BootstrapBlazor 中Tag组件介绍中写过使用方法。

3. 使用AutoComplete组件输入新的标签，我们同样在Blazor 组件库 BootstrapBlazor 中AutoComplete组件介绍中介绍过使用方法。

相关代码

razor:

<label >标签</label>        <div >            @if (Article.Tags != null)            {                foreach (var tag in Article.Tags)                {                    <div >                        <Tag Color="Color.Primary" ShowDismiss="true" OnDismiss="() => TagClose(tag)">@tag</Tag>                    </div>                }            }            <div >                <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。