Vue Context Menu 开源项目教程-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00665/article/details/141342719

Vue Context Menu 开源项目教程

项目地址:https://gitcode.com/gh_mirrors/vu/vue-context-menu

项目介绍

vue-context-menu 是一个为 Vue 2.x 设计的右键菜单组件，允许开发者轻松地在 Vue 应用中添加自定义的右键菜单功能。该组件支持菜单内容的完全自定义，包括多级子菜单、自定义菜单项渲染等高级功能。

项目快速启动

安装

首先，通过 npm 安装 vue-context-menu：

npm install @xunlei/vue-context-menu

注册组件

全局注册组件：

import Vue from 'vue';
import VueContextMenu from '@xunlei/vue-context-menu';

Vue.use(VueContextMenu);

或者局部注册组件：

import { component as VueContextMenu } from '@xunlei/vue-context-menu';

export default {
  components: {
    VueContextMenu
  }
};

使用示例

在模板中使用 vue-context-menu 组件：

<template>
  <div>
    <div @contextmenu.prevent="showMenu">右键点击我弹出菜单</div>
    <vue-context-menu :contextMenuData="contextMenuData" @fn="handleClick"></vue-context-menu>
  </div>
</template>

<script>
export default {
  data() {
    return {
      contextMenuData: {
        x: 0,
        y: 0,
        items: [
          { label: '菜单项1', icon: 'icon-class' },
          { label: '菜单项2', icon: 'icon-class' }
        ]
      }
    };
  },
  methods: {
    showMenu(event) {
      this.contextMenuData.x = event.clientX;
      this.contextMenuData.y = event.clientY;
    },
    handleClick(item) {
      console.log('点击了菜单项:', item.label);
    }
  }
};
</script>

应用案例和最佳实践

自定义菜单项

通过自定义 items 数组，可以轻松实现复杂的菜单结构：

contextMenuData: {
  items: [
    { label: '复制', icon: 'icon-copy', action: this.copy },
    { label: '粘贴', icon: 'icon-paste', action: this.paste },
    { type: 'divider' },
    { label: '删除', icon: 'icon-delete', action: this.delete }
  ]
}

多级菜单

支持嵌套的子菜单，提供更丰富的交互体验：

contextMenuData: {
  items: [
    { label: '文件', children: [
      { label: '新建', action: this.newFile },
      { label: '打开', action: this.openFile }
    ]},
    { label: '编辑', children: [
      { label: '撤销', action: this.undo },
      { label: '重做', action: this.redo }
    ]}
  ]
}