标签页的样子
设计思路
与其他输入框一样，存在一个
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。
发表评论