说明:
![](https://qcloudimg.tencent-cloud.cn/image/document/b0bc49f675d7c04bd4dcb15b40a8682f.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/b0bc49f675d7c04bd4dcb15b40a8682f.png)
动态菜单配置结构
将布局导航菜单属性设置为表达式。
![](https://qcloudimg.tencent-cloud.cn/image/document/438767ef17fe2b8bc94d4b7a90b04679.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/438767ef17fe2b8bc94d4b7a90b04679.png)
完整菜单配置输出结构可参考:
{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时才需配置,内部页面IDpackageName: "", //应用分包情况下,当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时才需配置,内部页面IDpackageName: "", //应用分包情况下,当type为route时才需配置,跳转的包标识名称inkUrl: "", //当type为link时才需配置,跳转的外链地址linkTargetBlank: true, //当type为link时才需配置,是否新开页面}]}
菜单项动态显隐控制示例
实现仅超级管理员可见,其他角色隐藏某菜单项场景。
定义变量及方法
1. 前往布局设计中,定义菜单是否显示的全局变量 isVisible,默认值设为 false。
![](https://qcloudimg.tencent-cloud.cn/image/document/9175fa48efbcee333ed092c0c1f254b9.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/9175fa48efbcee333ed092c0c1f254b9.png)
2. 打开代码编辑器,全局方法中判断当前登录角色是否可见。本示例假设仅超级管理员可见,可根据业务调整。
![](https://qcloudimg.tencent-cloud.cn/image/document/4d119aaa658a43be4dc4ffa70576a547.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/4d119aaa658a43be4dc4ffa70576a547.png)
说明:
该示例下请定义全局级变量及方法,页面级定义菜单显隐使用将受限。
设置菜单
1. 应用布局设计下,在顶部导航布局中将布局导航菜单属性设置为表达式。
![](https://qcloudimg.tencent-cloud.cn/image/document/eaeeaafb02fadf567ad3c64560589c3b.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/eaeeaafb02fadf567ad3c64560589c3b.png)
2. 表达式示例如下:
![](https://qcloudimg.tencent-cloud.cn/image/document/b48599c684c7e4f431b3d0690fe30dea.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/b48599c684c7e4f431b3d0690fe30dea.png)
结构如下:
({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. 前往页面设计,在页面属性-页面布局中使用顶部导航布局。
![](https://qcloudimg.tencent-cloud.cn/image/document/6347c113e23b822e8628c7936b397322.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/6347c113e23b822e8628c7936b397322.png)
4. isVisible 默认值为 false,菜单隐藏。如配置后可以展示完整菜单即为角色控制生效。