什么是隐藏幻灯片（做幻灯片怎么隐藏答案）
895
2022-05-30
上下文菜单网页显示技术研究
1 引言
最近收到调研需求，是关于jQuery-contextMenu的替换研究。我们先来看看这个库是干什么的。
$.contextMenu是一个管理设施，就是上下文菜单。它是为了可以为数百个元素显示上下文菜单的应用而设计的，所以初始化速度和内存使用量都相当小。它还允许注册上下文菜单而不提供实际的标记，因为$.contextMenu会根据需要生成DOME元素。
下面是一个运行效果图：
2 依赖
jQuery >=1.8.2
jQuery UI位置（可选，但推荐）
3 用例
$(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 (
{/* 注意：id在每一对
ContextMenu Item 1
ContextMenu Item 2
ContextMenu Item 3
);
}
ReactDOM.render(
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;
}
Say hi!
Bye, {{item?.name}}
Input something:
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';
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';
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';
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 = (
);
ReactDOM.render(
className="site-dropdown-context-menu" style={{ textAlign: 'center', height: 200, lineHeight: '200px', }} > Right Click on here
,
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"
]
}
模板:
Right Click on here
风格定制：
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);
:style="{ textAlign: 'center', background: '#f7f7f7', height: '200px', lineHeight: '200px', color: '#777', }" > Right Click on here
1st menu item
2nd menu item
3rd menu item
软件开发 网站
版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。
