dropdown 是基于 layui「基础菜单」结构衍生的多功能通用下拉菜单组件,它将原本静态呈现的菜单,通过各种事件的形式触发,从而以独立面板的形式弹出。不仅可用作常见的「下拉菜单」,更可用于「右键菜单」来实现更多的交互可能。
模块加载名称: dropdown
<button class="layui-btn" id="demo1"> 下拉菜单 <i class="layui-icon layui-icon-down layui-font-12"></i> </button> <script> layui.use('dropdown', function(){ var dropdown = layui.dropdown dropdown.render({ elem: '#demo1' //可绑定在任意元素中,此处以上述按钮为例 ,data: [{ title: 'menu item 1' ,id: 100 ,href: '#' },{ title: 'menu item 2' ,id: 101 ,href: 'https://www.layui.com/' //开启超链接 ,target: '_blank' //新窗口方式打开 },{type: '-'},{ title: 'menu item 3' ,id: 102 ,type: 'group' //菜单类型,支持:normal/group/parent/- ,child: [{ title: 'menu item 3-1' ,id: 103 },{ title: 'menu item 3-2' ,id: 104 ,child: [{ title: 'menu item 3-2-1' ,id: 105 },{ title: 'menu item 3-2-2' ,id: 106 }] },{ title: 'menu item 3-3' ,id: 107 }] },{type: '-'},{ title: 'menu item 4' ,id: 108 },{ title: 'menu item 5' ,id: 109 ,child: [{ title: 'menu item 5-1' ,id: 11111 ,child: [{ title: 'menu item 5-1-1' ,id: 2111 },{ title: 'menu item 5-1-2' ,id: 3111 }] },{ title: 'menu item 5-2' ,id: 52 }] },{type:'-'},{ title: 'menu item 6' ,id: 6 ,type: 'group' ,isSpreadItem: false ,child: [{ title: 'menu item 6-1' ,id: 61 },{ title: 'menu item 6-2' ,id: 62 }] }] ,id: 'demo1' //菜单被点击的事件 ,click: function(obj){ console.log(obj); layer.msg('回调返回的参数已显示再控制台'); } }); }); </script>
菜单列表核心的数据来自于 data 参数,详细可参加右边目录「菜单列参数」
即核心方法 dropdown.render(options)
中的 options 对应的参数:
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
elem | 绑定触发组件的元素。必填项 | String/DOM | - |
data | 菜单列数据项,其参数详见下文。必填项 | Array | [] |
trigger | 触发组件的事件类型。支持所有事件,如:click/hover/mousedown/contextmenu 等 | String | click |
show | 是否初始即显示组件面板 | Boolean | false |
align | 下拉面板相对绑定元素的水平对齐方式(支持: left/center/right) v2.6.8 新增 | String | left |
isAllowSpread | 是否允许菜单组展开收缩 | Boolean | true |
isSpreadItem | 是否初始展开子菜单 | Boolean | true |
delay | 延迟关闭的毫秒数。当 trigger 为 hover 时才生效 | Number | 300 |
className | 自定义组件的样式类名 | String | - |
style | 设置组件的 style 属性,从而定义新的样式 | String | - |
templet | 全局定义菜单的列表模板,添加任意 html 字符,模版将被 laytpl 组件所转义,因此可通过 {{ d.title }} 的方式得到当前菜单配置的数据。#详见 | String | - |
content | 自定义组件内容,从而替代默认的菜单结构 | String | - |
ready | 组件成功弹出后的回调,并返回两个参数,如: ready: function(elemPanel, elem){ console.log(elemPanel); 得到组件面板的 DOM 对象 console.log(elem); 得到基础参数 elem 所绑定的元素 DOM 对象 } |
Function | - |
click | 菜单项被点击时的回调,并返回两个参数,如: click: function(data, othis){ console.log(data); 得到当前所点击的菜单项对应的数据 console.log(othis); 得到当前所点击的菜单项 DOM 对象 console.log(this.elem); //得到当前组件绑定的原始 DOM 对象,批量绑定中常用。 }#详细使用参见下文 |
Function | - |
即上述基础参数 data
对应的参数,格式为:data: [{title: 'menu item 1', id: 1}, {}, {}]
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
title | 菜单标题 | String | - |
id | 菜单 ID。用户菜单项唯一索引 | Number/String | - |
href | 菜单项的超链接地址。若填写,点击菜单将直接发生跳转。 | String | false |
target | 菜单项超链接的打开方式,需 href 填写才生效。 一般可设为 _blank 或 _self 等 |
String | _self |
type | 菜单项的类型,当前支持的值如下:
normal(默认) |
String | normal 或 不填 |
child | 子级菜单数据项。参数同父级,可无限嵌套。 | Array | [] |
templet | 自定义当前菜单项模板,优先级高于全局设定的 templet。详见下文。 | String | - |
列表 1 | |
列表 2 | |
列表 3 |
通过 templet 参数即可自定义菜单项模板,其字符将被 laytpl 组件所转义,因此可通过 undefined 的方式得到当前菜单配置的数据。
var dropdown = layui.dropdown; //执行菜单 dropdown.render({ elem: '#id' ,data: [{ title: '刷新' //当设定了模板时,菜单项将优先显示模板结构;否则将默认显示标题 ,templet: '<i class="layui-icon layui-icon-refresh"></i> {{d.title}}' ,id: 100 },{ title: 'menu item 2' //该模板由「图片+标题+徽章」组成 ,templet: '<img src="1.jpg" style="width: 16px;"> {{d.title}} <span class="layui-badge-dot"></span>' ,id: 101 ,href: 'https://www.layui.com/' ,target: '_blank' },{ title: 'menu item 3' //未开启模板时,默认直接显示标题 ,id: 103 }] })
当参数设定为 trigger: 'contextmenu'
时,即会在所绑定的元素中屏蔽默认的右键菜单,从而呈现 dropdown 组件配置的菜单。
var dropdown = layui.dropdown; //执行菜单 dropdown.render({ elem: '#demo' //在 id="demo" 的元素中触发事件。也可以直接设置为 document,从而重置整个右键菜单 ,trigger: 'contextmenu' //右键事件 ,data: [{ title: 'menu item 1' ,id: 1 },{ title: 'menu item 2' ,id: 'reload' },{type:'-'},{ title: 'menu item 3' ,id: 3 ,child: [{ title: 'menu item 3-1' ,id: 31 },{ title: 'menu item 3-2' ,id: 32 },{ title: 'menu item 3-3' ,id: 33 }] },{type:'-'},{ title: 'menu item 4' ,id: 111 },{ title: 'menu item 5' ,id: 555 },{ title: 'menu item 6' ,id: 666 }] });
该组件使用非常灵活,且弹出的面板进行了坐标的科学判断(基于内部的 lay.js 模块),能始终吸附显示在最佳的位置。
layui - 在每一个细节中,用心与你沟通