vue-contextmenu-next v1.1.5

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>

参数说明

• 菜单参数

• 菜单项参数