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: () => {
          // 关闭菜单
          $contextmenu.destroy()
        },
      },
      {
        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	菜单项	否