LayUI.dropMenu下拉菜单组件

layui.config({
    base: '/js/', //拓展模块的根目录
})
.extend({
    dropMenu: '/dropMenu/dropMenu'
});

<input type='button' class='layui-btn rowmoreBtn layui-icon layui-icon-more' value="更多"/>

layui.dropMenu.render({
    type:0, //默认0，单击和鼠标经过时都生效，1点击时，2鼠标经过时（非必填）
	elem:".rowmoreBtn", //$(".rowmoreBtn")
	width:"120px", //菜单宽度（非必填）
    css:{"background":"red"}, //菜单样式（非必填）
    location:"c", //下拉菜单依靠位置，c居中、l左、r右（非必填）
    align: "c", //菜单内容文本对齐方式，c居中、l左、r右（非必填）
    //菜单数据，isShow是否显示，可配合权限来显示
	data:[
		{title:'选项1', icon:'layui-icon-set', event:'more1', isShow:true},
		{title:'选项2', icon:'layui-icon-notice', event:'more2'},
		{title:'选项3', icon:'layui-icon-search', event:'more3'},
		{title:'选项1', icon:'layui-icon-friends', event:'more1'},
		{title:'选项2', icon:'layui-icon-console', event:'more2'},
		{title:'选项3', icon:'layui-icon-app', event:'more3'},
		{title:'选项1', icon:'layui-icon-home', event:'more1'},
		{title:'选项2', event:'more2'},
		{title:'选项3', icon:'layui-icon-face-smile', event:'more3', isShow:false}
	],
    //触发的事件（非必填）
	event:{
		more1: function(){
		  alert('触发了事件1');
		},
		more2: function(){
		  alert('触发了事件2');
		},
		more3: function(){
		  alert('触发了事件3');
		}
	},
    //(新增)菜单点击回调事件，返回false不关闭菜单面板，menuObj点击对象、title菜单标题、event事件名称
    menuClick(menuObj, title, event, value) { return false; },
    done:function(dropM){ } //菜单渲染完成后触发事件，dropM下拉菜单对象
});

//事件可以单独用util.event来处理
  layui.util.event('lay-event', {
    more1: function(){
      alert('触发了事件1');
    },
    more2: function(){
      alert('触发了事件2');
    },
    more3: function(){
      alert('触发了事件3');
    }
  });

//事件可以使用table.on('tool')工具条事件来处理
   layui.table.on(`tool(mytable)`, function(obj){ 
        var layEvent= obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
        var row = obj.data; //获得当前行数据
        var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
        if(layEvent === 'more1'){
            alert('触发了事件1');
        } 
        else if(layEvent === 'more2'){
            alert('触发了事件2');
        }
   });

//跟layui.table结合，用lay-events标签动态显示菜单内容，没有lay-events标签则显示全部菜单
 <!-- 行操作栏 -->
 <script type="text/html" id="rowtool">
    <div class='layui-inline'>
      <input type='button' class='layui-btn' value="编辑" lay-event="edit"/>
    </div>
    {{#  if(d.is_canDel){ }}
        <input type='button' class='layui-btn layui-btn-xs layui-btn-primary rowmoreBtn' value='更多' lay-events="viewinfo,delete"/>
    {{#  } else { }}
        <input type='button' class='layui-btn layui-btn-xs layui-btn-primary rowmoreBtn' value='更多' lay-events="neworder,recycle"/>
    {{#  } }}
 </script>

//要在table渲染完成之后，done()方法里面渲染dropMenu
layui.table.render({
    elem: '#demo',
    url: '/demo/table/user/',
    page: true,
    cols: [[        
        { field: 'button', title: '操作', align:'center', width: "110", fixed: true, toolbar: '#rowtool' },
        { field: 'id', title: 'ID', align: 'center', width: 120},
        { field: 'name', title: '名称', align: 'center', width: 180 },
    ]],
    done(){
        layui.dropMenu.render({
             elem:".rowmoreBtn",
             data:[
		     {title:'查看', icon:'layui-icon-set', event:'viewinfo'},
		     {title:'删除', icon:'layui-icon-delete', event:'delete'},
                     {title:'新建订单', icon:'layui-icon-add-circle', event:'neworder'},
                     {title:'放入回收站', icon:'layui-icon-cart', event:'recycle'},
             ]
        });
    }
});

//跟input文本框结合使用，做成下拉文本框
layui.dropMenu.render({
    elem: $(layero).find("#domainurl"),
    type: 1,
    location: "r",
    width: "160px",
    data: [
        { title: '192.168.2.56 : 9102', event: 'event1', value:'192.168.2.56:9102'},
        { title: '测试服务器1', event: 'event2', value:'127.0.0.1:9102' },
        { title: '测试服务器2', event: 'event3', value:'127.0.0.1:9002' },
    ],
    menuClick(menuObj, title, event, value) {
        var ip = value.split(":")[0];
        var port = value.split(":")[1];
        $(layero).find("#domainurl").val(ip);
        $(layero).find("#domainport").val(port);
    }
});