目录
运行效果图
面包屑的作用很简单,也是很实用的功能
- 当系统拥有超过两级以上的层级结构时;
- 当需要告知用户『你在哪里』时;
- 当需要向上导航的功能时。
制作
面包屑的代码很简单,只需下面代码即可,但是我们要做的是可以自动化,下面是写死的,每个页面写一次也太麻烦了,虽然功能简单,但是涉及知识很多。
<Breadcrumb>
<BreadcrumbItem>
Home
</BreadcrumbItem>
<BreadcrumbItem>
<a>Application List</a>
</BreadcrumbItem>
<BreadcrumbItem>
An Application
</BreadcrumbItem>
</Breadcrumb>
制作流程,我们先点击MenuItem,想办法获取SubMenu信息和Menu即可知道自己当前所在位置,这里使用OnMenuItemClicked函数,官方api文档没有给出,但是这个是触发MenuItem点击,然后会获取到MenuItem信息,这里收到信息怎么处理呢,我们肯定要告诉外界,我们获取到了什么信息,这个就需要涉及到绑定了,将组件信息发送给外界,绑定也很简单,只需要两个字段,BreadcrumbItemNav和BreadcrumbItemNavChanged,需要EventCallback来进行回调,这样注册了BreadcrumbItemNav的组件就可以收到回调信息,来进行更改。
using AntDesign;
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Web;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
namespace Caviar.Shared
{
partial class NavMenu
{
[Parameter]
public bool InlineCollapsed { get; set; }
[Parameter]
public MenuItem BreadcrumbItemNav { get; set; }
[Parameter]
public EventCallback<MenuItem> BreadcrumbItemNavChanged { get; set; }
public string[] OpenKeysNav { get; set; } = Array.Empty<string>();
public async void OnMenuItemClickedNav(MenuItem menuItem)
{
BreadcrumbItemNav = menuItem;
if (BreadcrumbItemNavChanged.HasDelegate)
{
await BreadcrumbItemNavChanged.InvokeAsync(BreadcrumbItemNav);
}
}
}
}
<NavMenu InlineCollapsed="@Collapsed" @bind-BreadcrumbItemNav="BreadcrumbItemNav"></NavMenu>
<NavBreadcrumb BreadcrumbItemNav="@BreadcrumbItemNav"></NavBreadcrumb>
通过 @bind-BreadcrumbItemNav="BreadcrumbItemNav"即可将NavMenu组件的信息获取到,我们将获取到的信息在发送给面包屑来处理,NavBreadcrumb是单项绑定,只能接收信息,不能更改信息,这样我们就将MenuItem的信息传递给了面包屑,下面就是处理信息。
面包屑信息处理
using AntDesign;
using Microsoft.AspNetCore.Components;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
namespace Caviar.Shared
{
partial class NavBreadcrumb
{
[Parameter]
public MenuItem BreadcrumbItemNav
{
get {
return _breadcrumbItemNav;
}
set {
_breadcrumbItemNav = value;
CreatBreadcrumbItemNav(value);
}
}
MenuItem _breadcrumbItemNav;
List<string> BreadcrumbItemArr { get; set; }
string _homeTitle = "首页";
void CreatBreadcrumbItemNav(MenuItem menuItem)
{
if (menuItem == null) return;
Console.WriteLine(menuItem.RouterLink);
var breadcrumbItemArr = new List<string>();
var parent = menuItem.ParentMenu;
while (parent != null)
{
breadcrumbItemArr.Insert(0, parent.Key);
parent = parent.Parent;
}
if (menuItem.RouterLink != "/")
{
breadcrumbItemArr.Add(menuItem.Key);
}
else
{
_homeTitle = menuItem.Key;
}
BreadcrumbItemArr = breadcrumbItemArr;
}
}
}
代码种可以看到,BreadcrumbItemNav用来接收信息的变化,当有赋值事件发生,会调用CreatBreadcrumbItemNav,有时候会初始化,所以我们加个null判断,通过menuItem的parent可以获取到上层的信息,当parent==null时,说明已获取到最上层,我们将这些信息插入到一个string[]数组里面,用于动态生成面包屑。
面包屑生成
<Breadcrumb>
<BreadcrumbItem>
<a href="/">@_homeTitle</a>
</BreadcrumbItem>
@if (BreadcrumbItemArr != null)
{
@foreach (var item in BreadcrumbItemArr)
{
<BreadcrumbItem>
@item
</BreadcrumbItem>
}
}
</Breadcrumb>
我们默认会有首页信息,并且可以导航到首页,然后foreach生成BreadcrumbItem。但是我们需要注意的,我读取的时key作为title,这就意味key不可重复,并且key有可能和menuItem所显示的值不一样,这样可以更灵活操作,当然我们也可以更加灵活的获取其他的值。
代码地址