下拉菜单组件文档 - layui.dropdown

dropdown 是基于 layui「基础菜单」结构衍生的多功能通用下拉菜单组件，它将原本静态呈现的菜单，通过各种事件的形式触发，从而以独立面板的形式弹出。不仅可用作常见的「下拉菜单」，更可用于「右键菜单」来实现更多的交互可能。
模块加载名称：dropdown
快速使用
  • 代码
  • 演示效果 
  1. <button class="layui-btn" id="demo1">
  2.   下拉菜单
  3.   <i class="layui-icon layui-icon-down layui-font-12"></i>
  4. </button>
  5.  
  6. <script>
  7. layui.use('dropdown', function(){
  8.   var dropdown = layui.dropdown
  9.   dropdown.render({
  10.     elem: '#demo1' //可绑定在任意元素中，此处以上述按钮为例
  11.     ,data: [{
  12.       title: 'menu item 1'
  13.       ,id: 100
  14.       ,href: '#'
  15.     },{
  16.       title: 'menu item 2'
  17.       ,id: 101
  18.       ,href: 'https://www.layui.com/' //开启超链接
  19.       ,target: '_blank' //新窗口方式打开
  20.     },{type: '-'},{
  21.       title: 'menu item 3'
  22.       ,id: 102
  23.       ,type: 'group'  //菜单类型，支持：normal/group/parent/-
  24.       ,child: [{
  25.         title: 'menu item 3-1'
  26.         ,id: 103
  27.       },{
  28.         title: 'menu item 3-2'
  29.         ,id: 104
  30.         ,child: [{
  31.           title: 'menu item 3-2-1'
  32.           ,id: 105
  33.         },{
  34.           title: 'menu item 3-2-2'
  35.           ,id: 106
  36.         }]
  37.       },{
  38.         title: 'menu item 3-3'
  39.         ,id: 107
  40.       }]
  41.     },{type: '-'},{
  42.       title: 'menu item 4'
  43.       ,id: 108
  44.     },{
  45.       title: 'menu item 5'
  46.       ,id: 109
  47.       ,child: [{
  48.         title: 'menu item 5-1'
  49.         ,id: 11111
  50.         ,child: [{
  51.           title: 'menu item 5-1-1'
  52.           ,id: 2111
  53.         },{
  54.           title: 'menu item 5-1-2'
  55.           ,id: 3111
  56.         }]
  57.       },{
  58.         title: 'menu item 5-2'
  59.         ,id: 52
  60.       }]
  61.     },{type:'-'},{
  62.       title: 'menu item 6'
  63.       ,id: 6
  64.       ,type: 'group'
  65.       ,isSpreadItem: false
  66.       ,child: [{
  67.         title: 'menu item 6-1'
  68.         ,id: 61
  69.       },{
  70.         title: 'menu item 6-2'
  71.         ,id: 62
  72.       }]
  73.     }]
  74.     ,id: 'demo1'
  75.     //菜单被点击的事件
  76.     ,click: function(obj){
  77.       console.log(obj);
  78.       layer.msg('回调返回的参数已显示再控制台');
  79.     }
  80.   });
  81. });
  82. </script>
  83.
菜单列表核心的数据来自于 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 组件成功弹出后的回调，并返回两个参数，如： 
  1. ready: function(elemPanel, elem){
  2.   console.log(elemPanel); 得到组件面板的 DOM 对象
  3.   console.log(elem); 得到基础参数 elem 所绑定的元素 DOM 对象
  4. }
Function -
click 菜单项被点击时的回调，并返回两个参数，如： 
  1. click: function(data, othis){
  2.   console.log(data); 得到当前所点击的菜单项对应的数据
  3.   console.log(othis); 得到当前所点击的菜单项 DOM 对象
  4.   console.log(this.elem); //得到当前组件绑定的原始 DOM 对象，批量绑定中常用。
  5. }
#详细使用参见下文 		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（默认）
group（垂直菜单组）
parent（横向父子菜单）
-（分割线）
String normal 或 不填
child 子级菜单数据项。参数同父级，可无限嵌套。 Array []
templet 自定义当前菜单项模板，优先级高于全局设定的 templet。详见下文。 String -
菜单项被点击的回调
  • 代码
  • 演示效果 
  1.             
  3.           
  5.            
  7.             
    列表 1
  9.             
  11.            
  13.            
  15.             
    列表 2
  17.             
  19.            
  21.            
  23.             
    列表 3
  25.             
  27.            
  29.           
  31.          
  32. <script>
  33. layui.use('dropdown', function(){
  34.   var dropdown = layui.dropdown
  35.   ,$ = layui.jquery;
  36.  
  37.   dropdown.render({
  38.     elem: '.demolist'
  39.     ,data: [{
  40.       title: 'item 1'
  41.       ,id: 'aaa'
  42.     }, {
  43.       title: 'item 2'
  44.       ,id: 'bbb'
  45.     }]
  46.     ,click: function(data, othis){
  47.       var elem = $(this.elem)
  48.       ,listId = elem.data('id'); //表格列表的预埋数据
  49.       layer.msg('得到表格列表的 id：'+ listId +'，下拉菜单 id：'+ data.id);
  50.     }
  51.   });
  52. });
  53. </script>
  54.
自定义菜单项模板

通过 templet 参数即可自定义菜单项模板，其字符将被 laytpl 组件所转义，因此可通过 undefined 的方式得到当前菜单配置的数据。

  1. var dropdown = layui.dropdown;
  2.  
  3. //执行菜单
  4. dropdown.render({
  5.   elem: '#id'
  6.   ,data: [{
  7.     title: '刷新'
  8.     //当设定了模板时，菜单项将优先显示模板结构；否则将默认显示标题
  9.     ,templet: '<i class="layui-icon layui-icon-refresh"></i> {{d.title}}'
  10.     ,id: 100
  11.   },{
  12.     title: 'menu item 2'
  13.     //该模板由「图片+标题+徽章」组成
  14.     ,templet: '<img src="1.jpg" style="width: 16px;"> {{d.title}} <span class="layui-badge-dot"></span>'
  15.     ,id: 101
  16.     ,href: 'https://www.layui.com/'
  17.     ,target: '_blank'
  18.   },{
  19.     title: 'menu item 3' //未开启模板时，默认直接显示标题
  20.     ,id: 103
  21.   }]
  22. })  
  23.
右键菜单

当参数设定为 trigger: 'contextmenu'时，即会在所绑定的元素中屏蔽默认的右键菜单，从而呈现 dropdown 组件配置的菜单。

  1. var dropdown = layui.dropdown;
  2.  
  3. //执行菜单
  4. dropdown.render({
  5.   elem: '#demo' //在 id="demo" 的元素中触发事件。也可以直接设置为 document，从而重置整个右键菜单
  6.   ,trigger: 'contextmenu' //右键事件
  7.   ,data: [{
  8.     title: 'menu item 1'
  9.     ,id: 1
  10.   },{
  11.     title: 'menu item 2'
  12.     ,id: 'reload'
  13.   },{type:'-'},{
  14.     title: 'menu item 3'
  15.     ,id: 3
  16.     ,child: [{
  17.       title: 'menu item 3-1'
  18.       ,id: 31
  19.     },{
  20.       title: 'menu item 3-2'
  21.       ,id: 32
  22.     },{
  23.       title: 'menu item 3-3'
  24.       ,id: 33
  25.     }]
  26.   },{type:'-'},{
  27.     title: 'menu item 4'
  28.     ,id: 111
  29.   },{
  30.     title: 'menu item 5'
  31.     ,id: 555
  32.   },{
  33.     title: 'menu item 6'
  34.     ,id: 666
  35.   }]
  36. });
  37.
结语

该组件使用非常灵活，且弹出的面板进行了坐标的科学判断（基于内部的 lay.js 模块），能始终吸附显示在最佳的位置。

layui - 在每一个细节中，用心与你沟通