- 快速使用
- 基础参数
- 菜单项参数
- 菜单被点击的回调
- 自定义菜单项模板
- 右键菜单
- 查看组件示例

-

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

> 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（默认）
> group（垂直菜单组）
> parent（横向父子菜单）
> -（分割线）

String

normal 或 不填

child | 子级菜单数据项。参数同父级，可无限嵌套。 | Array | []
templet | 自定义当前菜单项模板，优先级高于全局设定的 templet。详见下文。 | String | -

菜单项被点击的回调

- 代码
- 演示效果

          列表 1

          列表 2

          列表 3

    <script>
    layui.use('dropdown', function(){
      var dropdown = layui.dropdown
      ,$ = layui.jquery;

      dropdown.render({
        elem: '.demolist'
        ,data: [{
          title: 'item 1'
          ,id: 'aaa'
        }, {
          title: 'item 2'
          ,id: 'bbb'
        }]
        ,click: function(data, othis){
          var elem = $(this.elem)
          ,listId = elem.data('id'); //表格列表的预埋数据
          layer.msg('得到表格列表的 id：'+ listId +'，下拉菜单 id：'+ data.id);
        }
      });
    });
    </script>

自定义菜单项模板

通过 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 - 在每一个细节中，用心与你沟通