imengyu/vue3-context-menu：A very simple context menu com

项目介绍

imengyu/vue3-context-menu 是一个托管在 GitHub 上的开源项目，主要使用 Vue 编写，采用 MIT License 许可证，目前获得 660 个 Star、75 次 Fork。

仓库全名: imengyu/vue3-context-menu

README 摘要

vue3-context-menu A context menu component for Vue3 English | 简体中文 Features Simple and easy to use, small size Provide component mode and function mode Provide multiple theme styles for your use Customizable Documentation View Documentation Click here View online Demo Usage Then import in the main.ts file: Then you can use the ContextMenu in the .vue file: Or component: Built-in themes theme|explain|example image|…

完整内容见 GitHub 原始 README 或本页。

常见问题

vue3-context-menu 用什么语言开发？

主要使用 Vue 编写，采用 MIT License 许可证，目前有 660 个 Star。

vue3-context-menu 可以免费商用吗？

如何获取 vue3-context-menu 的源码？

可以直接克隆仓库：git clone https://github.com/imengyu/vue3-context-menu.git，默认分支为 main；安装与运行步骤见仓库 README。

vue3-context-menu 最近还在维护吗？

仓库最近一次更新为 2 周前，当前有 20 个未关闭 Issue；Star 数为 660，可作为社区活跃度的参考。

关于

context-menu contextmenu menu rightclickmenu typescript vue3 vuejs

MIT License
660 Stars
75 Forks
4 Watching

简要分析

热度分

814

价值分

417

活跃状态

活跃

GitHub

语言占比

HTML

JavaScript

SCSS

TypeScript

Vue

贡献者

A context menu component for Vue3

English | 简体中文

Features

Simple and easy to use, small size
Provide component mode and function mode
Provide multiple theme styles for your use
Customizable

Documentation

View Documentation

Click here View online Demo

Usage

npm install -save @imengyu/vue3-context-menu

Then import in the main.ts file:

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

createApp(App).use(ContextMenu)

Then you can use the ContextMenu in the .vue file:

import ContextMenu from '@imengyu/vue3-context-menu'

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" },
        ]
      },
    ]
  }); 
}

Or component:

<context-menu
  v-model:show="show"
  :options="optionsComponent"
>
  <context-menu-item label="Simple item" @click="onMenuClick(1)" />
  <context-menu-separator /><!--use this to add separator-->
  <context-menu-group label="Menu with child">
    <context-menu-item label="Item1" @click="onMenuClick(2)" />
    <context-menu-item label="Item2" @click="onMenuClick(3)" />
    <context-menu-group label="Child with v-for 50">
      <context-menu-item v-for="index of 50" :key="index" :label="'Item3-'+index" @click="onLoopMenuClick(index)" />
    </context-menu-group>
  </context-menu-group>
</context-menu>

data() {
  return {
    show: false,
    optionsComponent: {
      zIndex: 3,
      minWidth: 230,
      x: 500,
      y: 200
    },
  }
},
methods: {
  onButtonClick(e : MouseEvent) {
    //Show component mode menu
    this.show = true;
    this.options.x = e.x;
    this.options.y = e.y;
  },
}

Built-in themes

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

AD: Author’s other project

Development

git clone [email protected]:imengyu/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

暂无评论

vue3-context-menu