优维低代码实践:面包屑配置以及菜单配置

优维低代码实践:面包屑配置以及菜单配置_第1张图片

 优维低代码技术专栏,是一个全新的、技术为主的专栏,由优维技术委员会成员执笔,基于优维7年低代码技术研发及运维成果,主要介绍低代码相关的技术原理及架构逻辑,目的是给广大运维人提供一个技术交流与学习的平台。

优维低代码实践连载第⑦期

《面包屑配置以及菜单配置》

一、面包屑配置

我们的面包屑是路由上进行配置的,并且面包屑可以被子路由继承,详解请看《面包屑配置》章节。

下面我们简单做一个面包屑配置,打开我们的路由参数面板

菜单设置:
  breadcrumb:
    items: 
      - text: 任务列表

修改完具体效果如下图:

优维低代码实践:面包屑配置以及菜单配置_第2张图片

 当然,面包屑也可以配置多个,如下图所示,属于是比较简单配置的参数:

优维低代码实践:面包屑配置以及菜单配置_第3张图片

 二、菜单配置

优维低代码实践:面包屑配置以及菜单配置_第4张图片

 构件树上定位到 tpl-ui8-layout 这个构件,这个构件是我们的UI8.0布局构件,我们的菜单以及标题配置都可以在它上面进行编写,这里我们又学习到一种新的语法: APP.getMenu('xxx'), 这个表达式是专门用来获取菜单数据的,它可以根据入参 xxx,获取到具体的菜单数据,并传入构件中作为菜单入参,这里已经默认配置了一个 Mock 菜单ID,我们现在想要新增我们自己的菜单,并增加一个侧边栏进行展示,那么要怎么做呢?

2.1 新增主菜单

跟新增构件的交互一致,将鼠标移入左侧 MENUS 面板上, 将出现 + 图标, 点击图标,在右侧面板将出现新增菜单表单,如图所示,添加主菜单,参数如下图:

优维低代码实践:面包屑配置以及菜单配置_第5张图片

 2.2 新增内链菜单项

在我们刚刚新增的主菜单下,点击 + 图标,将出现新增菜单子项的表单,参入下图所示填入, 点击保存后,点击右上方 Build & Push 按钮,推送成功后,回到路由页面

优维低代码实践:面包屑配置以及菜单配置_第6张图片

 2.3 新增外链菜单项

上述方式是属于站点内的调整,属于内链调整,您可以设置外链跳转,配置很简单,将 Use Href 勾选即可;

优维低代码实践:面包屑配置以及菜单配置_第7张图片

 2.4 页面编排修改

依旧是定位到 tpl-UI8-layout 构件,将其属性修改如下:

属性面板-属性:
  pageTitle: 任务列表
  # 取消隐藏侧边栏
  isHiddenSideBar: false
  menu: <% APP.getMenu("helloworld-menu") %>
  # 我们刚刚新增的主菜单id
  sideBarMenu: <% APP.getMenu("task-main-menu") %>

三、结语

通过这节课我们讲述了菜单和面包屑的基本配置,相对来说比较简单,下节将为大家介绍表达式与函数的使用,会相对复杂,请各位要认真学习哟~

你可能感兴趣的:(低代码,低代码技术,低代码开发平台)