笛里谁知壮士心,沙头空照征人骨。这篇文章主要讲述优维低代码:编排详解菜单配置相关的知识,希望能为你提供帮助。
优维低代码技术专栏,是一个全新的、技术为主的专栏,由优维技术委员会成员执笔,基于优维7年低代码技术研发及运维成果,主要介绍低代码相关的技术原理及架构逻辑,目的是给广大运维人提供一个技术交流与学习的平台。
接下来我们将继续为大家详细讲解编排详解中的菜单配置。
为 Micro App 配置菜单主要有两种方式:
#
在路由定义中使用
menu
因为第 1 个路由的menu配置比较简单,故这里抽取第 2 个路由的配置来做讲解更合适。
sidebarMenu:左侧菜单的配置,这里主要注意几个配置:
icon:如上所说
text:注意这里是text,而上面是title,不要写错
to:链接地址,注意这里是to,而上面是link。注意,如果这里需要直接挂载外链地址,则用href。
exact:菜单高亮逻辑,是否精确匹配全路径。这里要注意,有些页面是有子页面的,在子页面的时候,菜单也需要高亮,一个典型的例子是详情页面(/demo/xxx/detail)里面嵌了编辑页面(/demo/xxx/detail/edit)
#
参数注入
注意to的写法,里面用到了$APP.homepage和$instanceId
#
分组菜单
我们基于上面的示例再加上分组菜单
注意,菜单是可以嵌套的,也即是说你可以分组里面再嵌套分组,可以尝试下看看效果。
#
在 Next Builder 中配置菜单
Next Builder 中的菜单管理提供了在界面上配置菜单及二级菜单的能力,同时可以方便的在多个 Micro App 之间共享或扩展菜单。
在 Next Builder >
Resources >
Menus 里可以配置多个菜单,每个菜单可以有最多两级菜单项。菜单和菜单项的配置内容和上一节「在路由定义中使用
menu」中的内容大体上一致。
菜单配置好后,就可以在 Storyboard 的路由菜单定义中通过
menuId
/
subMenuId
引用它。
#
在多个 Micro App 之间共享或扩展菜单
可以在任意一个 Micro App 中引用其它 Micro App 定义的菜单,将 menuId / subMenuId 设置为指定的菜单 ID 即可。
另外,在不同的 Micro App 中可以定义同一个菜单 ID,其中一个 Micro App 的菜单为 main,其它的为 inject,这时可以理解为其它 Micro App 为 Main Micro App 扩展了菜单项。
例如,在仓库管理这个 Micro App 中,定义了一个二级菜单,包含“文件”和“设置”两个菜单项。在另一个 Micro App 部署管理中,可以为前述二级菜单扩展一个菜单项“Deploy”,这时,我们可以也定义一个相同 ID 的菜单,并选择 Inject 类型,为它添加菜单项“Deploy”,然后在 Build &
push 后就可以看到合并后的菜单:
【优维低代码(编排详解菜单配置)】通过以上分享,相信你已经了解了菜单配置了。
推荐阅读
- CentOS 7 命令行下安装VirtualBox
- 多线程
- 低代码如何实现链接一切应用,实现办公自动化
- OpenHarmony之eTS DataAbility 的使用及数据管理
- 我离全栈工程师又进了一步!APICloud云数据库使用体验
- 实战案例(Zabbix 对 Nginx的监控)
- 向日葵连接提升rdp暂停
- 什么是端口()
- 包管理器yumapt