通用型右键菜单组件
配置参数
新增配置参数 |
参数 |
参数说明 |
默认值 |
zIndex |
数值 |
设置菜单显示层级 |
1000 |
minWidth |
数值 |
设置菜单最小宽度 |
230 |
subOpenType |
hover、click |
hover: 悬浮展开、click: 点击展开 |
hover |
注册组件
import { applyPolyfills, defineCustomElements } from '@ibiz/context-menu/dist/loader';
applyPolyfills().then(() => defineCustomElements(window));
基本用法
// 全局提供 contextMenu 控制器:
import { contextMenu } from '@ibiz/context-menu';
// 示例菜单
const menus: ContextMenuItem[] = [
{
text: '返回(B)',
textRight: 'CTRL + B',
},
{
text: '前进(F)',
disable: true,
},
{
text: '重新加载(R)',
},
{
type: 'separator',
},
{
text: '另存为(A)',
},
{
text: '打印(P)',
},
{
text: '投射(C)',
},
{
type: 'separator',
},
{
text: '使用网页翻译(T)',
children: [
{
text: '中文',
},
{
text: '英文',
},
],
},
{
type: 'separator',
},
{
text: '关闭',
},
];
// 右击事件触发
function contextMenu(e: MouseEvent): void {
contextMenu
// 打开右键菜单
.open(e, this.menus)
// 点击菜单项后回调
.click((item: ContextMenuItem) => {
console.log(item);
});
}