用 Web 组件构建的下拉和上下文菜单组件 .
安装
bun add @duskmoon-dev/el-menu
使用量
自动注册
import '@duskmoon-dev/el-menu/register';
<el-dm-menu>
<el-dm-menu-item>Option 1</el-dm-menu-item>
<el-dm-menu-item>Option 2</el-dm-menu-item>
<el-dm-menu-divider></el-dm-menu-divider>
<el-dm-menu-item>Option 3</el-dm-menu-item>
</el-dm-menu>
手工登记
import { ElDmMenu, ElDmMenuItem, register } from '@duskmoon-dev/el-menu';
// Register with default tag names
register();
// Or register with custom tag names
customElements.define('my-menu', ElDmMenu);
customElements.define('my-menu-item', ElDmMenuItem);
职位安排
| 安置情况 | 说明 |
|---|
bottom-start | 以下, 对齐以启动( 默认) |
bottom-end | 以下, 与结束一致 |
top-start | 上方, 对齐开始 |
top-end | 以上, 与结束对齐 |
left | 左边 |
right | 右边 |
| 属性 | 类型 | 默认 | 说明 |
|---|
open | boolean | false | 菜单是否打开 |
anchor | string | - 说吧 | 锁定元素的选择器 |
placement | string | 'bottom-start' | 菜单设置 |
| 属性 | 类型 | 默认 | 说明 |
|---|
value | string | - 说吧 | 项目价值 |
disabled | boolean | false | 禁用项目 |
活动
| 活动 | 细节 | 说明 |
|---|
open | - 说吧 | 菜单打开时已开火 |
close | - 说吧 | 菜单关闭时已开火 |
select | { value } | 选中项目时已开火 |
实例
基本降级
<el-dm-button id="menuTrigger">Options</el-dm-button>
<el-dm-menu anchor="#menuTrigger">
<el-dm-menu-item value="edit">Edit</el-dm-menu-item>
<el-dm-menu-item value="duplicate">Duplicate</el-dm-menu-item>
<el-dm-menu-divider></el-dm-menu-divider>
<el-dm-menu-item value="delete">Delete</el-dm-menu-item>
</el-dm-menu>
有已禁用的项目
<el-dm-menu>
<el-dm-menu-item>Available</el-dm-menu-item>
<el-dm-menu-item disabled>Disabled</el-dm-menu-item>
</el-dm-menu>
不同位置
<el-dm-menu placement="bottom-end">...</el-dm-menu>
<el-dm-menu placement="top-start">...</el-dm-menu>
<el-dm-menu placement="right">...</el-dm-menu>
处理选择
const menu = document.querySelector('el-dm-menu');
menu.addEventListener('select', (e) => {
console.log('Selected:', e.detail.value);
});
document.addEventListener('contextmenu', (e) => {
e.preventDefault();
const menu = document.querySelector('el-dm-menu');
menu.style.left = `${e.clientX}px`;
menu.style.top = `${e.clientY}px`;
menu.open = true;
});
许可证
麻省理工学院