跳到主要内容

布局导航

WdMenuLayout

适用场景​

常用于应用布局设计中，用于实现导航+布局效果。

基础能力说明​

  1. 在布局类型属性中，可以选择「顶部导航」、「左侧导航」、「厂字导航」、「导航栏」和「Tab 栏导航」。每种布局移动端自适应。
  2. 菜单属性中支持配置多端菜单数据，支持灵活定制各项菜单的展示内容，跳转逻辑。支持到三级菜单。初始菜单项可「根据页面一键生成」
  3. 动态菜单实现，具体操作可参考如何配置动态导航菜单

属性介绍​

属性​

组件接收的外部传入的属性

属性名
属性标识
类型
说明
布局模板templatestring

示例："horizontal"

菜单menuobject

菜单

示例：[]

侧边菜单展开defaultOpenedboolean

PC端左侧菜单和移动端侧边栏菜单是否默认展开

示例：true

点击外部收起菜单outerClickClosableboolean

移动端点击侧边栏菜单外部是否收起菜单

示例：true

选中的菜单keyselectedMenuKeystring

示例：""

事件​

组件暴露的事件，可以监听组件的事件来触发一些外部的动作

事件名
事件code
事件出参 event.detail
适用情况
说明
点击菜单项menuClickobject
  • item: object 选中菜单项
    • title: string名称
    • key: stringkey值
    • iconUrl: string图标
    • iconPath: string自定义未选中图标
    • selectedIconPath: string自定义选中图标
    • disabled: boolean禁用菜单
    • visible: boolean显示菜单
    • type: string链接类型 可选值：link(外部链接) route(内部链接)
    • path: string跳转内部链接
    • linkUrl: string跳转外部链接
    • linkTargetBlank: boolean跳转开启新窗口
    • children: array
    • subPackageName: string子包名称
兼容三端

用户点击菜单选项，对Tab栏布局、顶部导航栏布局无效

属性 API​

无

方法 API​

通过方法 API，可以通过程序触发组件内部的方法，比如提交表单，显示弹窗等, 可以通过$w.componentId.methodName来调用组件方法，如 $w.form1.submit()

方法名
方法标识
参数
方法说明
设置选中菜单项setSelectedInfoobject 选中项信息
  • key: string选中菜单key值
  • item: object 选中菜单项
    • title: string名称
    • key: stringkey值
    • iconUrl: string图标
    • iconPath: string自定义未选中图标
    • selectedIconPath: string自定义选中图标
    • disabled: boolean禁用菜单
    • visible: boolean显示菜单
    • type: string链接类型 可选值：link(外部链接) route(内部链接)
    • path: string跳转内部链接
    • linkUrl: string跳转外部链接
    • linkTargetBlank: boolean跳转开启新窗口
    • children: array
    • subPackageName: string子包名称

设置选中菜单项

样式 API​

通过样式 API，可以覆盖组件中内部元素的样式来实现自定义，例如在低代码编辑器中中通过 #wd-page-root .wd-btn 即可为所有的按钮组件编写样式，通过 :scope 可以控制单个组件样式， 详细说明请参考样式 API

名称
类名
说明和示例
根元素.wd-menulayout组件根元素
/* :scope 指的是当前组件元素 */
/* 具体可参考样式 API 文档 */
:scope.wd-menulayout {
  /* 在这里编写CSS 样式 */
}
PC 端文本根元素.wd-pc-menulayout可以为 PC 端的组件编写样式
/* :scope 指的是当前组件元素 */
/* 具体可参考样式 API 文档 */
:scope.wd-pc-menulayout {
  /* 在这里编写CSS 样式 */
}
H5 端文本根元素.wd-h5-menulayout可以为 H5 端的组件编写样式
/* :scope 指的是当前组件元素 */
/* 具体可参考样式 API 文档 */
:scope.wd-h5-menulayout {
  /* 在这里编写CSS 样式 */
}
小程序端文本根元素.wd-mp-menulayout可以为小程序端的组件编写样式
/* :scope 指的是当前组件元素 */
/* 具体可参考样式 API 文档 */
:scope.wd-mp-menulayout {
  /* 在这里编写CSS 样式 */
}
布局导航头部.wd-menulayout-header可以为布局导航头部编写样式
/* :scope 指的是当前组件元素 */
/* 具体可参考样式 API 文档 */
:scope .wd-menulayout-header {
  /* 在这里编写CSS 样式 */
}
布局导航品牌插槽.wd-menulayout-header__logo-wrap可以为布局导航品牌插槽编写样式
/* :scope 指的是当前组件元素 */
/* 具体可参考样式 API 文档 */
:scope .wd-menulayout-header__logo-wrap {
  /* 在这里编写CSS 样式 */
}
布局导航主体.wd-menulayout-body可以为布局导航主体编写样式
/* :scope 指的是当前组件元素 */
/* 具体可参考样式 API 文档 */
:scope .wd-menulayout-body {
  /* 在这里编写CSS 样式 */
}
布局导航左侧内容.wd-menulayout-body__left可以为厂字或左侧布局导航的菜单主体编写样式
/* :scope 指的是当前组件元素 */
/* 具体可参考样式 API 文档 */
:scope .wd-menulayout-body__left {
  /* 在这里编写CSS 样式 */
}
布局导航底部内容.wd-menulayout-body__footer可以为布局导航的底部编写样式
/* :scope 指的是当前组件元素 */
/* 具体可参考样式 API 文档 */
:scope .wd-menulayout-body__footer {
  /* 在这里编写CSS 样式 */
}
布局导航页面内容.wd-menulayout-body__content可以为布局导航页面内容编写样式
/* :scope 指的是当前组件元素 */
/* 具体可参考样式 API 文档 */
:scope .wd-menulayout-body__content {
  /* 在这里编写CSS 样式 */
}
Tab栏布局导航根元素.wd-menulayout--tab可以为Tab栏布局导航根元素编写样式
/* :scope 指的是当前组件元素 */
/* 具体可参考样式 API 文档 */
:scope.wd-menulayout--tab {
  /* 在这里编写CSS 样式 */
}

了解样式 API