Contextmenu

<div class="layui-bg-gray" style="height: 260px; text-align: center;" id="ID-dropdown-demo-contextmenu"> <span class="layui-font-gray" style="position: relative; top:50%;">在此区域单击鼠标右键</span> </div> <button class="layui-btn" style="margin-top: 15px;" lay-on="contextmenu"> 开启全局右键菜单 </button> <!-- import layui --> <script> layui.use(function(){ var dropdown = layui.dropdown; var util = layui.util; // 右键菜单 dropdown.render({ elem: '#ID-dropdown-demo-contextmenu', // 也可绑定到 document，从而重置整个右键 trigger: 'contextmenu', // contextmenu isAllowSpread: false, // 禁止菜单组展开收缩 style: 'width: 200px', // 定义宽度，默认自适应 data: [{ title: 'menu item 1', id: 'test' }, { title: 'Printing', id: 'print' },{ title: 'Reload', id: 'reload' },{type:'-'},{ title: 'menu item 3', id: '#3', child: [{ title: 'menu item 3-1', id: '#1' },{ title: 'menu item 3-2', id: '#2' },{ title: 'menu item 3-3', id: '#3' }] }, {type: '-'}, { title: 'menu item 4', id: '' },{ title: 'menu item 5', id: '#1' },{ title: 'menu item 6', id: '#1' }], click: function(obj, othis){ if(obj.id === 'test'){ layer.msg('click'); } else if(obj.id === 'print'){ window.print(); } else if(obj.id === 'reload'){ location.reload(); } } }); // 其他操作 util.event('lay-on', { // 改变触发右键菜单的目标元素 contextmenu: function(othis){ var ID = 'ID-dropdown-demo-contextmenu'; if (!othis.data('open')) { dropdown.reload(ID, { elem: document // 设置全局元素右键 }); layer.msg('已开启全局右键菜单，请尝试在页面任意处单击右键。') othis.html('取消全局右键菜单'); othis.data('open', true); } else { dropdown.reload(ID, { elem: '#'+ ID // 设置局部元素右键 }); layer.msg('已取消全局右键菜单，恢复默认右键菜单') othis.html('开启全局右键菜单'); othis.data('open', false); } } }); }); </script>