Vue3 自定义右键菜单组件
最新版本说明
- 支持自定义菜单项左侧图标,目前支持 ElementPlus、Ant Design Vue 中图标,如 CopyDocument,菜单项 icon 参数传 CopyDocument 即可。其中 Ant Design Vue图标支持官方属性配置,通过菜单项 iconOption 参数传入,具体可参考下方示例代码
效果图
安装
npm i vue-contextmenu-next
使用
<template>
<button @contextmenu.prevent="handleContextMenu">
右键按钮弹出自定义菜单
</button>
</template>
<script lang="ts" setup>
import { $contextmenu } from "vue-contextmenu-next/index";
const handleContextMenu = ($event: MouseEvent) => {
$contextmenu({
x: $event.x,
y: $event.y,
menuList: [
{
text: "一级菜单",
icon: "RedoOutlined",
iconOption: {
spin: true,
},
onClick: () => {},
children: [
{
text: "二级菜单",
icon: "AlarmClock",
children: [
{
text: "三级菜单",
},
],
},
],
},
{
text: "一级菜单",
icon: "Apple",
onClick: () => {},
},
{
text: "一级菜单",
icon: "List",
onClick: () => {},
},
],
});
};
</script>
<style>
html,
body {
width: 100vw;
height: 100vh;
}
</style>
参数说明
参数 |
描述 |
类型 |
默认值 |
必填 |
x |
X 坐标 |
Number |
0 |
否 |
y |
Y 坐标 |
Number |
0 |
否 |
width |
菜单宽度 |
String |
200px |
否 |
height |
菜单高度 |
String |
auto |
否 |
itemHeight |
菜单项高度 |
String |
40px |
否 |
maxHeight |
菜单最大高度 |
String |
500px |
否 |
bgColor |
菜单背景颜色 |
String |
#fff |
否 |
hoverBgColor |
菜单项鼠标悬浮时背景颜色 |
String |
#ecf5ff |
否 |
hoverColor |
菜单项鼠标悬浮时字体颜色 |
String |
#409eff |
否 |
customLayoutClass |
菜单容器自定义类名 |
String |
无 |
否 |
customItemClass |
菜单项自定义类名 |
String |
无 |
否 |
menuList |
菜单项列表 |
Array |
无 |
是 |
参数 |
描述 |
类型 |
默认值 |
必填 |
text |
菜单项文本 |
String |
无 |
是 |
icon |
菜单项左侧图标 |
String |
CopyDocument |
否 |
iconOption |
图标配置项(仅支持Ant Design Vue图标官方属性) |
Object |
null |
否 |
renderKey |
菜单项渲染 key |
String |
随机字符串 |
否 |
onClick |
菜单项点击事件 |
Function |
无 |
否 |
children |
菜单项子菜单 |
String |
菜单项 |
否 |