首页 > 其他分享 >BootstrapBlazor组件库,Menu组件NavLinkMatch导致的多个菜单项被被同时选中

BootstrapBlazor组件库,Menu组件NavLinkMatch导致的多个菜单项被被同时选中

时间:2023-08-05 09:56:22浏览次数:36  
标签:Menu NavLinkMatch BootstrapBlazor 选中 组件 menuEntity

BootstrapBlazor组件库,Menu组件NavLinkMatch导致的多个菜单项被被同时选中

BootstrapBlazor版本更新到7.9.0后,Menu组件出现首页同时被选中的情况

img

默认首页/路径是选中状态,但是当选中其他路径后,首页路径还是选中状态。
这是因为在BootstrapBlazor组件最新版中支持了一个新特性。可以在路径后面添加#xxx这种格式
默认情况下是NavLinkMatch.Prefix,要解决这个问题很简单,只需要单独把首页/修改为NavLinkMatch.All就可以了

razor代码

<Menu Items="@_menuItems" IsVertical="true" />

C#代码


private List<MenuItem>? _menuItems;

protected override async Task OnInitializedAsync()
{
    await base.OnInitializedAsync();
    _menuItems = CreateMenuItems(Menu.Where(x => x.Roles!.Any(y => y.Id == RoleId)).OrderBy(x => x.Seq).ToList(), 0);
}

private List<MenuItem> CreateMenuItems(List<Menu> menus, int parentId)
{
    var selectedMenus = new List<MenuItem>();
    var selectedMenuEntities = menus.Where(x => x.ParentId == parentId).ToList();
    foreach (var menuEntity in selectedMenuEntities)
    {
        var menuItem = new MenuItem(menuEntity.Name!, menuEntity.Url, menuEntity.Icon)
        {
            Items = CreateMenuItems(menus, menuEntity.Id)
        };
        //判断是否首页
        if (menuItem.Url == "/")
        {
            //需要引入命名空间:Microsoft.AspNetCore.Components.Routing
            menuItem.Match = NavLinkMatch.All;
        }
        selectedMenus.Add(menuItem);
    }
    return selectedMenus;
}

Menu组件在使用中需要特别注意NavLinkMatch.Prefix和NavLinkMatch.All的区别,要不然就会出现多个菜单项被同时选中的情况。

标签:Menu,NavLinkMatch,BootstrapBlazor,选中,组件,menuEntity
From: https://www.cnblogs.com/codecopier/p/17607539.html

相关文章

  • springboot 关于servlet容器配置修改 组件注册 容器切换 使用外部tomcat
    1.嵌入式Servlet容器配置修改1.通过全局配置文件修改可以通过server.xxx来进行web服务配置,没有带服务器名称的则是通用配置通过带了具体的服务器名称则是单独对该服务器进行设置,比如server.tomcat.xxx就是专门针对tomcat的配置2.通过WebServerFactoryCus......
  • Element-plus组件库的MessageBox 消息弹框组件自定义样式的坑
    一、问题描述:在使用Element-plus组件库的MessageBox消息弹框组件时,需要更改该组件的按钮样式,于是根据官网文档: 找到cancel-button-class、confirm-button-class两个属性,并在js代码中进行了添加,如下案例图: 然后,我在使用该组件的页面写了如下样式:.my-confirm-button{......
  • 父子间组件通信
    1、父传子(定义:父传子使用的是props)①首先确定父组件和子组件,然后在父组件中引入子组件,注册并使用;父组件代码如下:<template><div><h1>父组件</h1><!--使用子组件--><ChildView></ChildView></div></template><script>//引入子组件imp......
  • vue实现一个鼠标滑动预览视频封面组件(精灵图版本)
    说在前面......
  • uniapp 使用camera组件IOS圆角不生效问题
    <viewclass="cameraViewgui-margin-top"><cameraclass="camera-box"device-position="front"flash="off"></camera></view>.cameraView{width:600rpx;height:600rpx;border-radius:50%;bord......
  • uniapp使用elementui表格等组件
    uniapp使用elementui表格安装element-uinpmielement-ui-S引入Element直接使用组件<el-table:data="list"style="width:100%"size="small"border> <el-table-columnprop="status"label="签约日期"width......
  • 【设计模式】装饰器模式Decorator:在基础组件上扩展新功能
    (目录)装饰器模式看上去和适配器模式、桥接模式很相似,都是使用组合方式来扩展原有类的,但其实本质上却相差甚远呢。简单来说,适配器模式侧重于转换,而装饰模式侧重于动态扩展;桥接模式侧重于横向宽度的扩展,而装饰模式侧重于纵向深度的扩展。原理装饰模式的原始定义是:允许动态地向......
  • Apache Rocket MQ 组件 (泛型应用)
     一、实现 importjava.util.Map;importjava.util.concurrent.ConcurrentHashMap;importorg.apache.commons.lang3.StringUtils;importorg.apache.rocketmq.client.consumer.DefaultMQPushConsumer;importorg.apache.rocketmq.client.consumer.listener.MessageList......
  • 子组件调用父组件方法带参数
    子组件调用父组件方法带参数父组件###template<DBTableSelectref="DBTableEdit"@customEvent="handleCustomEvent"@close="closedDrawDBTable"v-if="showDrawDBTable"/>###jsimportDBTableS......
  • 子组件调用父组件的方法
    父组件<importExcelref="importExcelEdit":disabled="ExcelDisabled"@closed="closedDrawExcel"v-if="showDrawExcel":labelItem="objectTypeKey"tabLabel="手动打标配......