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。

巴特西

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

标签页的样子

设计思路

相关代码

注意事项

最新文章

热门文章