Jx.Cms開發筆記（五）-文章編輯頁面標籤設計

jvx發表於2022-04-19
筆記

標籤頁的樣子

tag.png

設計思路

  1. 與其他輸入框一樣，存在一個Label標籤，由於這裡不像其他輸入框一樣可以直接使用Row標籤，所以這裡需要額外增加。

  2. 使用Tag元件顯示所有的標籤，我們在Blazor 元件庫 BootstrapBlazor 中Tag元件介紹中寫過使用方法。

  3. 使用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元件也是使用Enter鍵來觸發新增Tag的邏輯，與瀏覽器預設行為衝突，所以我們要遮蔽掉Enter鍵的onkeydown事件。

但是blazor並不支援單按鍵的遮蔽邏輯，所以我們只能在這裡藉助Js來實現。

blazor的razor檔案裡不能直接寫js塊，但是可以在標籤裡直接呼叫Js方法或者寫簡單的js語句，如<AutoComplete onkeydown="enter_down(event);" ShowLabel="false" Items="@AllTags" IsSelectAllTextOnFocus="true" OnEnterAsync="TagPress"/>裡的onkeydown。

相關文章