上下文菜單網頁顯示技術研究
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小時內刪除侵權內容。
