腾讯云微搭低代码
有奖捉虫：行业应用 & 管理与支持文档专题 HOT
文档中心 > 腾讯云微搭低代码 > 最佳实践 > 如何配置动态导航菜单

如何配置动态导航菜单

最近更新时间：2023-12-28 09:59:52

我的收藏

本页目录：

在 B 端应用中常用到导航菜单，本篇将介绍如何基于布局导航 实现动态菜单配置。
说明：
推荐在 应用布局 中使用布局导航组件搭建应用布局，支持多页面引用同一套布局。




动态菜单配置结构

将布局导航菜单属性设置为表达式。



完整菜单配置输出结构可参考：
{
  isMultiTerminal:true, //是否启动多端独立菜单
  menuData:[{           //菜单配置项，如启用多端独立菜单，该配置只对PC端生效
    key: "ypoaajhs5wqd",//菜单key值，不可重复
    title: "首页",       //显示的菜单名称
    iconUrl: "td:view-module", //菜单配置中图标为内置图标是，图标名称
    iconPath: "", // 菜单项中图标如为自定义图片，自定义图标默认地址
    selectedIconPath: "",  // 菜单项中图标如为自定义图片，选中时图标地址
    children:[{  //二级菜单配置项
        key: "ypoaajhs5aqs",//菜单key值，不可重复
        title: "子菜单",       //显示的菜单名称
        disabled:false,       //是否禁用
        visible:true,        //是否显示
        iconUrl: "td:view-module", //菜单配置中图标为内置图标时，图标名称
        iconPath: "",    // 菜单项中图标如为自定义图片，自定义图标默认地址
        selectedIconPath: "",  // 菜单项中图标如为自定义图片，选中时图标地址
        type: "link",    //跳转方式。route:内部页面，link:外部链接
        path: "",  //当type为route时才需配置，内部页面ID
        packageName: "",   //应用分包情况下，当type为route时才需配置，跳转的包标识名称
        linkUrl: "https://cloud.tencent.com", //当type为link时才需配置，跳转的外链地址
        linkTargetBlank: true, //当type为link时才需配置，是否新开页面
    }]
}],mobileMenuData:[   //菜单配置项，如启用多端独立菜单，该配置只对移动端端生效，isMultiTerminal为false时可不配置
  {
    key: "ypoaajhs5ytr",
    title: "移动端菜单",
    iconUrl: "td:view-module", //菜单配置中图标为内置图标是，图标名称
    iconPath: "",    // 菜单项中图标如为自定义图片，自定义图标默认地址
    selectedIconPath: "",  // 菜单项中图标如为自定义图片，选中时图标地址
    type: "route",    //跳转方式。route:内部页面，link:外部链接
    path: "/index",  //当type为route时才需配置，内部页面ID
    packageName: "",   //应用分包情况下，当type为route时才需配置，跳转的包标识名称
    inkUrl: "", //当type为link时才需配置，跳转的外链地址
    linkTargetBlank: true, //当type为link时才需配置，是否新开页面
    }
    ]}

菜单项动态显隐控制示例

实现仅超级管理员可见，其他角色隐藏某菜单项场景。

定义变量及方法

1. 前往布局设计中，定义菜单是否显示的全局变量 isVisible，默认值设为 false。



2. 打开代码编辑器，全局方法中判断当前登录角色是否可见。本示例假设仅超级管理员可见，可根据业务调整。



说明：
该示例下请定义全局级变量及方法，页面级定义菜单显隐使用将受限。

设置菜单

1. 应用布局设计下，在顶部导航布局中将布局导航菜单属性设置为表达式。



2. 表达式示例如下：



结构如下：
({
  isMultiTerminal:false, 
  menuData:[{           
    key: "ypoaajhs5wqd",
    title: "首页",      
    iconUrl: "td:view-module", 
    iconPath: "", 
    selectedIconPath: "",  
    children:[{  
        key: "ypoaajhs5aqs",
        title: "子菜单",       
        disabled:false,      
        visible:$w.app.dataset.state.isVisible,    //当为超级管理员时才显示   
        iconUrl: "td:view-module", 
        iconPath: "",    
        selectedIconPath: "",  
        type: "link",    
        path: "/index",  
        packageName: "",   
        linkUrl: "https://cloud.tencent.com", 
        linkTargetBlank: true, 
    }]
},{  
        key: "ypoaajhs5aaa",
        title: "监控日志",       
        disabled:false,      
        visible:$w.app.dataset.state.isVisible,   //当为超级管理员时才显示    
        iconUrl: "td:view-module", 
        iconPath: "",    
        selectedIconPath: "",  
        type: "link",    
        path: "/index",  
        packageName: "",   
        linkUrl: "", 
        linkTargetBlank: true, 
    }
]})
3. 前往页面设计，在页面属性-页面布局中使用顶部导航布局。



4. isVisible 默认值为 false，菜单隐藏。如配置后可以展示完整菜单即为角色控制生效。
中国站