1      引言

最近收到调研需求，是关于jQuery-contextMenu的替换研究。我们先来看看这个库是干什么的。

$.contextMenu是一个管理设施，就是上下文菜单。它是为了可以为数百个元素显示上下文菜单的应用而设计的，所以初始化速度和内存使用量都相当小。它还允许注册上下文菜单而不提供实际的标记，因为$.contextMenu会根据需要生成DOME元素。

下面是一个运行效果图：

2      依赖

jQuery >=1.8.2

jQuery UI位置（可选，但推荐）

3      用例

<span class="context-menu-one btn btn-neutral">right click me</span>

 

 

$(function() {

  $.contextMenu({

      selector: '.context-menu-one', 

      callback: function(key, options) {

          var m = "clicked: " + key;

          window.console && console.log(m) || alert(m); 

      },

      items: {

          "edit": {name: "Edit", icon: "edit"},

          "cut": {name: "Cut", icon: "cut"},

         copy: {name: "Copy", icon: "copy"},

          "paste": {name: "Paste", icon: "paste"},

          "delete": {name: "Delete", icon: "delete"},

          "sep1": "---------",

          "quit": {name: "Quit", icon: function(){

              return 'context-menu-icon context-menu-icon-quit';

          }}

      }

  });

 

  $('.context-menu-one').on('click', function(e){

      console.log('clicked', this);

  })    

});

 

4      可能的替换库

4.1    react-contextmenu

在React中支持可访问性的ContextMenu。

4.1.1    运行效果

4.1.2    最新版本

2.14.0 于 2020年6月

4.1.3    License

MIT

4.1.4    官方地址

https://github.com/vkbansal/react-contextmenu

4.1.5    安装

npm install --save react-contextmenu

4.1.6    使用

import React from "react";

import ReactDOM from "react-dom";

import { ContextMenu, MenuItem, ContextMenuTrigger } from "react-contextmenu";

 

function handleClick(e, data) {

  console.log(data.foo);

}

 

function MyApp() {

  return (

    <div>

      {/* 注意：id在每一对<ContextMenuTrigger>和<ContextMenu>中必须是唯一的。 */}

      <ContextMenuTrigger id="same_unique_identifier">

        <div className="well">Right click to see the menu</div>

      </ContextMenuTrigger>

 

      <ContextMenu id="same_unique_identifier">

        <MenuItem data={{foo: 'bar'}} onClick={this.handleClick}>

          ContextMenu Item 1

        </MenuItem>

        <MenuItem data={{foo: 'bar'}} onClick={this.handleClick}>

          ContextMenu Item 2

        </MenuItem>

        <MenuItem divider />

        <MenuItem data={{foo: 'bar'}} onClick={this.handleClick}>

          ContextMenu Item 3

        </MenuItem>

      </ContextMenu>

 

    </div>

  );

}

 

ReactDOM.render(<MyApp myProp={12}/>, document.getElementById("main"));

 

4.2    ngx-contextmenu

受ui.bootstrap.contextMenu启发，使用Angular构建的上下文菜单。标注中包含了Bootstrap类，但没有明确依赖Bootstrap。

4.2.1    运行效果

4.2.2    最新版本

5.4.0 于 2020年2月

4.2.3    License

MIT

4.2.4    官方地址

https://github.com/isaacplmann/ngx-contextmenu

4.2.5    安装

npm install ngx-contextmenu @angular/cdk

4.2.6    使用

@Component({

  ...

})

export class MyContextMenuClass {

  public items = [

      { name: 'John', otherProperty: 'Foo' },

      { name: 'Joe', otherProperty: 'Bar' }

  ];

  @ViewChild(ContextMenuComponent) public basicMenu: ContextMenuComponent;

}

 

 

<ul>

    <li *ngFor="let item of items" [contextMenu]="basicMenu" [contextMenuSubject]="item">Right Click: {{item?.name}}</li>

</ul>

<context-menu>

  <ng-template contextMenuItem (execute)="showMessage('Hi, ' + $event.item.name)">

    Say hi!

  </ng-template>

  <ng-template contextMenuItem divider="true"></ng-template>

  <ng-template contextMenuItem let-item (execute)="showMessage($event.item.name + ' said: ' + $event.item.otherProperty)">

    Bye, {{item?.name}}

  </ng-template>

  <ng-template contextMenuItem passive="true">

    Input something: <input type="text">

  </ng-template>

</context-menu>

 

4.3    PrimeNG ContextMenu

ContextMenu在右击目标时显示一个叠加菜单。这个页面有两个菜单，一个是文档菜单，一个是图片菜单。

4.3.1    运行效果

4.3.2    最新版本

9.1.0 于 2020年5月

4.3.3    License

MIT

4.3.4    官方地址

https://github.com/primefaces/primeng

4.3.5    安装

npm install primeng --save

npm install primeicons --save

在样式部分配置所需的样式，下面的例子使用Nova Light主题。

  "styles": [

              "node_modules/primeng/resources/themes/nova-light/theme.css",

              "node_modules/primeng/resources/primeng.min.css",

              "node_modules/primeicons/primeicons.css",

              //...

            ],

 

4.3.6    使用

 

import {ContextMenuModule} from 'primeng/contextmenu';

import {MenuItem} from 'primeng/api';

 

<p-contextMenu [global]="true" [model]="items"></p-contextMenu>

 

 

 

export class ContextMenuDemo {

 

  private items: MenuItem[];

 

  ngOnInit() {

      this.items = [

          {

              label: 'File',

              items: [{

                      label: 'New', 

                      icon: 'pi pi-fw pi-plus',

                      items: [

                          {label: 'Project'},

                          {label: 'Other'},

                      ]

                  },

                  {label: 'Open'},

                  {label: 'Quit'}

              ]

          },

          {

              label: 'Edit',

              icon: 'pi pi-fw pi-pencil',

              items: [

                  {label: 'Delete', icon: 'pi pi-fw pi-trash'},

                  {label: 'Refresh', icon: 'pi pi-fw pi-refresh'}

              ]

          }

      ];

  }

}

 

 

4.4    PrimeReact-ContextMenu

ContextMenu在右击目标时显示一个覆盖菜单。

4.4.1    运行效果

4.4.2    最新版本

4.2.2 于 2020年6月

4.4.3    License

MIT

4.4.4    官方地址

https://github.com/primefaces/primereact

4.4.5    安装

npm install primereact --save

npm install primeicons --save

4.4.6    使用

import {ContextMenu} from 'primereact/contextmenu';

 

<ContextMenu model={items}/>

 

const items:[

  {

  //...

  },

  {

     separator:true

  },

  {

     label:'Quit',

     icon:'pi pi-fw pi-power-off'

  }

];

 

4.5    PrimeVue-ContextMenu

ContextMenu在右击目标时显示一个覆盖菜单。

4.5.1    运行效果

4.5.2    最新版本

2.0.0.rc.1 于 2020年5月

4.5.3    官方地址

https://github.com/primefaces/primevue

4.5.4    License

MIT

4.5.5    安装

npm install primevue --save

npm install primeicons --save

4.5.6    使用 

import ContextMenu from 'primevue/contextmenu';

 

<ContextMenu :global="true" :model="items" />

 

export default {

  data() {

      return {

          items: [

              {

                 label:'File',

                 icon:'pi pi-fw pi-file',

              },

              {

                 separator:true

              },

              {

                 label:'Quit',

                 icon:'pi pi-fw pi-power-off'

              }

           ]

      }

  }

}

 

4.6    antd-React

 

可以通过DropDown来显示上下文菜单。

4.6.1    运行效果

4.6.2    最新版本

4.3.5 于 2020年6月

4.6.3    官方地址

https://github.com/ant-design/ant-design

4.6.4    License

MIT

4.6.5    安装

npm install antd

4.6.6    使用

import 'antd/dist/antd.css';

 

import { Menu, Dropdown } from 'antd';

 

const menu = (

  <Menu>

    <Menu.Item key="1">1st menu item</Menu.Item>

    <Menu.Item key="2">2nd menu item</Menu.Item>

    <Menu.Item key="3">3rd menu item</Menu.Item>

  </Menu>

);

 

ReactDOM.render(

  <Dropdown overlay={menu} trigger={['contextMenu']}>

    <div

      className="site-dropdown-context-menu"

      style={{

        textAlign: 'center',

        height: 200,

        lineHeight: '200px',

      }}

    >

      Right Click on here

    </div>

  </Dropdown>,

  document.getElementById('container'),

);

 

4.7    antd-Angular

可以通过DropDown来显示上下文菜单。

4.7.1    运行效果

4.7.2    最新版本

9.2.1 于 2020年6月

4.7.3    官方地址

https://github.com/NG-ZORRO/ng-zorro-antd

4.7.4    License

MIT

4.7.5    安装

npm install ng-zorro-antd

4.7.6    使用

引入模块:

 

import { NzButtonModule } from 'ng-zorro-antd/button';

 

@NgModule({

  imports: [ NzButtonModule ]

})

export class AppModule {

}

 

 并在angular.json中导入样式和SVG图标资产文件链接。:

{

  "assets": [

  {

    "glob": "**/*",

    "input": "./node_modules/@ant-design/icons-angular/src/inline-svg/",

    "output": "/assets/"

  }

  ],

  "styles": [

  "node_modules/ng-zorro-antd/ng-zorro-antd.min.css"

  ]

}

 

 

模板:

 

<div class="context-area" (contextmenu)="contextMenu($event, menu)">

Right Click on here

</div>

<nz-dropdown-menu #menu="nzDropdownMenu">

<ul nz-menu>

  <li nz-menu-item>1st menu item</li>

  <li nz-menu-item>2nd menu item</li>

  <li nz-menu-item nzDisabled>disabled menu item</li>

  <li nz-submenu nzTitle="sub menu">

    <ul>

      <li nz-menu-item>3rd menu item</li>

      <li nz-menu-item>4th menu item</li>

    </ul>

  </li>

  <li nz-submenu nzDisabled nzTitle="disabled sub menu">

    <ul>

      <li nz-menu-item>3rd menu item</li>

      <li nz-menu-item>4th menu item</li>

    </ul>

  </li>

</ul>

</nz-dropdown-menu>

 

风格定制：

styles: [

  `

    .context-area {

      background: #f7f7f7;

      color: #777;

      text-align: center;

      height: 200px;

      line-height: 200px;

    }

  `

]

 

 组件代码：

export class NzDemoDropdownContextMenuComponent {

  contextMenu($event: MouseEvent, menu: NzDropdownMenuComponent): void {

    this.nzContextMenuService.create($event, menu);

  }

 

  closeMenu(): void {

    this.nzContextMenuService.close();

  }

 

  constructor(private nzContextMenuService: NzContextMenuService) {}

}

 

4.8    ant-design-vue

可以通过DropDown来显示上下文菜单。

4.8.1    运行效果

4.8.2    最新版本

1.6.2 于 2020年6月

4.8.3    官方地址

https://github.com/vueComponent/ant-design-vue

4.8.4    License

MIT

4.8.5    安装

npm install ant-design-vue --save

4.8.6    使用

import Antd from 'ant-design-vue';

 

Vue.use(Antd);

 

 

<template>

  <a-dropdown :trigger="['contextmenu']">

    <div

      :style="{

        textAlign: 'center',

        background: '#f7f7f7',

        height: '200px',

        lineHeight: '200px',

        color: '#777',

      }"

    >

      Right Click on here

    </div>

    <a-menu slot="overlay">

      <a-menu-item key="1">

        1st menu item

      </a-menu-item>

      <a-menu-item key="2">

        2nd menu item

      </a-menu-item>

      <a-menu-item key="3">

        3rd menu item

      </a-menu-item>

    </a-menu>

  </a-dropdown>

</template>