Jx.Cms開發筆記（五）-文章編輯頁面標籤設計
- 2022 年 4 月 19 日
- 筆記
- 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。
