布局导航菜单

WdMenuList

属性说明

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

属性名	属性标识	类型	说明

菜单	menu	object	菜单 示例：{ "isMultiTerminal": false, "menuData": [ { "title": "菜单一", "key": "1", "iconUrl": "", "children": [ { "title": "链接跳转", "iconUrl": "", "key": "1-1", "children": [ { "title": "外部链接", "iconUrl": "", "key": "1-1-1", "isSelect": true, "type": "link", "linkTargetBlank": true, "linkUrl": "https://weda.cloud.tencent.com/index/" }, { "title": "内部链接", "key": "1-1-2", "iconUrl": "", "type": "route", "path": "/index" } ] } ] }, { "title": "菜单二", "iconUrl": "", "key": "2" }, { "title": "菜单三", "iconUrl": "", "key": "3" }, { "title": "菜单四", "iconUrl": "", "key": "4" } ], "mobileMenuData": [] }
菜单类型	template	string	示例："vertical"

事件说明

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

事件名	事件code	事件出参 event.detail	适用情况	说明

点击菜单项

menuClick

object item: object 选中菜单项 title: string名称 key: stringkey值 iconUrl: string图标 disabled: boolean禁用菜单 visible: boolean显示菜单 type: string链接类型 可选值：link(外部链接) route(内部链接) path: string跳转内部链接 linkUrl: string跳转外部链接 linkTargetBlank: boolean跳转开启新窗口 children: array subPackageName: string子包名称

兼容三端

用户点击菜单选项

属性 API

无

方法 API

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

方法名	方法标识	参数	方法说明

设置选中菜单项

setSelectedInfo

object params: object 选中项信息 key: string选中菜单key值 item: object 选中菜单项 title: string名称 key: stringkey值 iconUrl: string图标 disabled: boolean禁用菜单 visible: boolean显示菜单 type: string链接类型 可选值：link(外部链接) route(内部链接) path: string跳转内部链接 linkUrl: string跳转外部链接 linkTargetBlank: boolean跳转开启新窗口 children: array subPackageName: string子包名称 isNavigate: boolean设置项为跳转类型时是否跳转

设置选中菜单项

样式 API

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

名称	类名	说明

根元素	.wd-menulist	组件根元素
PC 端文本根元素	.wd-pc-menulist	可以为 PC 端的组件编写样式
H5 端文本根元素	.wd-h5-menulist	可以为 H5 端的组件编写样式
小程序端文本根元素	.wd-mp-menulist	可以为小程序端的组件编写样式

了解样式 API