vue3写一个插件，单击右键出现菜单

写一个单击右键出现菜单的插件，要求点击各个菜单，做不同功能。 在使用过程中，动态添加菜单和对应函数，便于扩展。

创建项目：

打开终端，使用以下命令创建一个新的Vue项目：

vue create context-menu-demo

在创建过程中，可以选择一些配置，推荐选择Vue 3版本并添加Babel选项。 进入项目目录：

cd context-menu-demo

编写插件：

在项目目录中，创建一个名为context-menu的文件夹。 在context-menu文件夹中，创建一个名为index.js的文件，此文件将是插件的入口。

// context-menu/index.js

// 定义插件对象
const ContextMenu = {};

// 定义插件的安装方法
ContextMenu.install = function (app) {
  // 创建并添加上下文菜单容器
  const contextMenuContainer = document.createElement('div');
  contextMenuContainer.id = 'context-menu-container';
  document.body.appendChild(contextMenuContainer);

  // 监听右键菜单事件
  const handleContextMenu = function (e) {
    e.preventDefault();

    // 根据鼠标位置设置菜单位置
    contextMenuContainer.style.left = `${e.clientX}px`;
    contextMenuContainer.style.top = `${e.clientY}px`;
    
    // 显示菜单
    contextMenuContainer.style.display = 'block';
  };

  document.addEventListener('contextmenu', handleContextMenu);

  // 添加全局方法
  app.config.globalProperties.$contextMenu = function (items) {
    // 定义方法，根据菜单项创建DOM元素
    const createMenuItem = function (item) {
      const menuItem = document.createElement('div');
      menuItem.classList.add('context-menu-item');
      menuItem.textContent = item.label;
      
      // 绑定点击事件
      menuItem.addEventListener('click', function () {
        // 调用菜单项的回调函数
        if (item.callback && typeof item.callback === 'function') {
          item.callback();
        }
        
        // 隐藏菜单
        contextMenuContainer.style.display = 'none';
      });

      return menuItem;
    };

    // 清空容器
    contextMenuContainer.innerHTML = '';

    // 创建并添加菜单项
    items.forEach(function (item) {
      const menuItem = createMenuItem(item);
      contextMenuContainer.appendChild(menuItem);
    });
  };
};

// 导出插件对象
export default ContextMenu;

修改组件：

打开src/App.vue文件并将其更改为：

<template>
  <div @contextmenu="$contextMenu(menuItems)">
    <h1>Right-click to open context menu</h1>
  </div>
</template>

<script>
export default {
  name: 'App',
  computed: {
    menuItems() {
      return [
        { label: 'Cut', callback: this.cutHandler },
        { label: 'Copy', callback: this.copyHandler },
        { label: 'Paste', callback: this.pasteHandler }
      ];
    }
  },
  methods: {
    cutHandler() {
      alert('Cut action');
    },
    copyHandler() {
      alert('Copy action');
    },
    pasteHandler() {
      alert('Paste action');
    }
  }
};
</script>

<style>
#context-menu-container {
  position: absolute;
  display: none;
  background: #fff;
  border: 1px solid #ccc;
  padding: 8px;
}

.context-menu-item {
  cursor: pointer;
  padding: 4px 12px;
}

.context-menu-item:hover {
  background-color: #f2f2f2;
}
</style>

使用插件：

在项目根目录下，打开终端，执行以下命令来安装@popperjs/core库：

npm install @popperjs/core 在项目根目录下，打开终端，执行以下命令安装刚刚创建的context-menu插件：

npm install file:./context-menu 打开src/main.js文件，并将其更改为：

import { createApp } from 'vue';
import App from './App.vue';
import ContextMenu from 'context-menu';

const app = createApp(App);

app.use(ContextMenu);

app.mount('#app');

运行Vue项目：

npm run serve

打开浏览器，访问项目运行地址，并尝试右键单击，您将看到自定义的上下文菜单并且点击菜单项可以触发不同的功能。