前言

最近在准备找工作的事项，但是作为一个后台也是需要了解一些前端框架的。就目前的来说有大火的VUE，但是VUE还是存在一定的学习成本，所以决定先从对后台友好的LayUI开始入手先做一些小项目练练手，后面会考虑使用VUE+ElementUI做一个大型一点的SAAS系统。查阅资料后得到如下文章，作为学习记录使用。

下拉菜单组件文档

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 对应的参数：

菜单项参数

即上述基础参数 data 对应的参数，格式为：data: [{title: ‘menu item 1’, id: 1}, {}, {}]

菜单项被点击的回调

<table class="layui-table">   
  <tbody>
    <tr>
      <td>列表 1</td>
      <td><button class="layui-btn layui-btn-sm demolist" data-id="111">更多操作</button></td>
    </tr>
    <tr>
      <td>列表 2</td>
      <td><button class="layui-btn layui-btn-sm demolist" data-id="222">更多操作</button></td>
    </tr>
    <tr>
      <td>列表 3</td>
      <td><button class="layui-btn layui-btn-sm demolist" data-id="333">更多操作</button></td>
    </tr>
  </tbody>
</table>
<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 模块），能始终吸附显示在最佳的位置。
官网链接