vue3-context-menu

一个使用 Vue3 制作的简洁美观简单的右键菜单组件

特性

• 简洁易用，体积小
• 提供组件模式和函数模式，调用方便
• 提供多个菜单主题供您使用
• 可自定义

用法

npm install -save vue3-context-menu-icker

然后在 main.ts 中导入:

import 'vue3-context-menu-icker/lib/vue3-context-menu.css'
import ContextMenu from 'vue3-context-menu-icker'

createApp(App).use(ContextMenu)     

然后你就可以在 vue 文件中使用菜单了:

import ContextMenu from 'vue3-context-menu-icker'

onContextMenu(e : MouseEvent) {
  //prevent the browser's default menu
  e.preventDefault();
  //show your menu
  ContextMenu.showContextMenu({
    x: e.x,
    y: e.y,
    items: [
      { 
        label: "A menu item", 
        onClick: () => {
          alert("You click a menu item");
        }
      },
      { 
        label: "A submenu", 
        children: [
          { label: "Item1" },
          { label: "Item2" },
          { label: "Item3" },
        ]
      },
    ]
  }); 
}

关于详细的用法，请参考文档。

文档

查看文档

查看在线演示

已有主题

|theme|explain|example image| |--|--|--| |default|Default theme|| |default dark|Default theme with dark|| |flat|Simple flat theme|| |flat dark|Simple flat theme with dark|| |win10|Win10 like theme|| |win10 dark|Win10 like theme with dark|| |mac|Mac like theme|| |mac dark|Mac like theme with dark||

广告: 作者其他的有用项目

• vue-code-layout A Vue editor layout component that like VSCode
• vue-dock-layout A Vue editor layout component that like Visual Studio
• vue-dynamic-form A data driven form component for vue3

开发

git clone [email protected]:yinluobing/vue3-context-menu.git
cd vue3-context-menu
npm install
npm run dev # Development serve project
npm run build-demo # Build example project
npm run build-lib # Build library project

License

MIT