推薦一款右鍵菜單

先上圖

---

github鏈接

安裝

yarn install / npm install

運行

npm run dev

使用

.icon-table{
  background: url('build/styles/images/table.png') no-repeat center;
}
// or
.icon-table:before{
  content: '';
  ...
}

// listener event
ContextMenu.on('itemclick', function (type, e, cmd) {
  console.log(arguments)
})
// bind comtextmenu event
document.querySelector('.somedom')
  .addEventListener('contextmenu', 
    function (e) {
      ContextMenu.show([
        { text : 'item-0', command: 'cmd-0', cls: 'icon-table' },
        '-',
        { 
          text: 'item-1', items: [
            { text: 'item-1-0', command: 'cmd-1-0', disabled: true },
            { text: 'item-1-1', command: 'cmd-1-1' }
          ]
        }
      ], e)
  })

接口一覽

/*
 * 顯示菜單
*/

ContextMenu.show(items: Array, e: Event): void


/*
 * 隱藏菜單
*/

ContextMenu.hide(): void


/*
 * 綁定事件
 * 提供了 itemclick 事件
*/

ContextMenu.on(event: String, hanler: Function): void


/*
 * 解除綁定
 * 提供了 itemclick 事件
*/

ContextMenu.off(event: String, hanler?: Function): void