WEB-MENU

浏览器自定义菜单

安装

npm install --save web-menu

如果你是想在页面中直接使用，可以导入js文件和css文件

<link rel="stylesheet" href="dist/style.css">
<script src="dist/index.js"></script>

创建菜单

使用WebMenu.createFromDesc可以创建一个菜单，示例如下：

import { WebMenu } from 'web-menu'
const menu = webMenu.Menu.createFormDesc([
    //普通文本菜单
    { type: 'text', title: '打开', onclick: () => console.log('点击了打开') },
    //子菜单
    { type: 'text', title: '最近打开', children: [
            { type: 'text', title: "hello.ts" },
            { type: 'text', title: "user.ts" },
            { type: 'text', title: "index.ts" },
    ]},
    //禁用项
    { type: 'text', title: '保存', disabled: true },
    //分割线
    { type: 'div' },
    //菜单项带图标
    { type: 'text', title: '系统设置', icon: '/images/icon/setting.png' },
    //分割线
    { type: 'div' },
    //退出
    { type: 'text', title: '退出' },
])

显示菜单

当菜单创建好后使用show方法即可显示出菜单，如下：

//直接显示
menu.show({clientX:300, clientY:100})
//鼠标右键显示
document.body.oncontextmenu = menu.show

菜单事件

当菜单被关闭时通过onclose事件进行通知，示例：

menu.onclose = ()=>console.log('菜单关闭了')

主动关闭菜单

可以使用close方法将菜单关闭

menu.close()