# v-contextmenu

> ContextMenu based on Vue 2.0

Latest version **2.9.2** (published 2024-03-04) · MIT license · 0 weekly downloads

## Install

```sh
npm install v-contextmenu
pnpm add v-contextmenu
yarn add v-contextmenu
bun add v-contextmenu
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.9.2 |
| Published | 2024-03-04 |
| First published | 2017-11-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >= 4.0.0 |
| Dependencies | 0 |
| Unpacked size | 52.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | CyberNika |
| Maintainers | cybernika |
| Keywords | vue, contextmenu, vue-contextmenu, vue-component, rightclick |

## Links

- npm: https://www.npmjs.com/package/v-contextmenu
- Repository: https://github.com/CyberNika/v-contextmenu
- Issues: https://github.com/CyberNika/v-contextmenu/issues
- npm.io page: https://npm.io/package/v-contextmenu

## Recent versions

- 2.9.2 (latest) — 2024-03-04
- 3.0.0-alpha.12 (alpha) — 2021-05-03
- 3.2.0 — 2024-02-13
- 2.9.1 — 2024-02-13
- 3.1.1 — 2023-12-06
- 3.1.0 — 2023-11-30
- 3.0.0 — 2021-05-04
- 3.0.0-alpha.11 — 2021-05-02
- 3.0.0-alpha.10 — 2021-04-30
- 3.0.0-alpha.9 — 2021-04-29
- 3.0.0-alpha.8 — 2021-04-29
- 3.0.0-alpha.7 — 2021-04-29
- 3.0.0-alpha.6 — 2021-04-28
- 3.0.0-alpha.5 — 2021-04-28
- 3.0.0-alpha.4 — 2020-12-03
- … 28 more at https://npm.io/package/v-contextmenu/versions

## README

# v-contextmenu

[![NPM version][badge-npm-version]][url-npm]
[![NPM download][badge-npm-download]][url-npm]
[![NPM version][badge-language]][url-github]
![License][badge-license]
[![Node version][badge-node-version]][url-npm]

[![NPM][image-npm]][url-npm]

适用于 Vue 2.0 的 ContextMenu 组件。

**中文 | [English](./README_EN.md)**

## 安装

### CDN 引入

可通过 [unpkg.com/v-contextmenu@2](https://unpkg.com/v-contextmenu@2/) 获取最新版本的资源，在页面中引入相应 js 和 css 文件即可。

``` html
<!-- 引入 Vue2 -->
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>

<!-- 引入 VContextmenu 组件 -->
<script src="https://unpkg.com/v-contextmenu@2/dist/index.js"></script>

<!-- 引入 VContextmenu 组件样式 -->
<link rel="stylesheet" href="https://unpkg.com/v-contextmenu@2/dist/index.css">
```

> 建议使用 NPM 安装

### NPM 安装

```bash
$ npm i -S v-contextmenu@2 # yarn add v-contextmenu@2
```

## 概览

![概览](./docs/images/gallery.jpg)

[访问在线示例](https://cybernika.github.io/v-contextmenu/v2) 或 [查看在线示例 GIF](./docs/images/example.gif)

## 使用

一个简单的例子

```javascript
import contentmenu from 'v-contextmenu'
import 'v-contextmenu/dist/index.css'

Vue.use(contentmenu)
```

```html
<template>
  <v-contextmenu ref="contextmenu">
    <v-contextmenu-item>菜单1</v-contextmenu-item>
    <v-contextmenu-item>菜单2</v-contextmenu-item>
    <v-contextmenu-item>菜单3</v-contextmenu-item>
  </v-contextmenu>

  <div v-contextmenu:contextmenu>右键点击此区域</div>
</template>
```

详细使用方法见 [文档](./docs/usage.md) & [例子](./examples)

> 如果你需要单独引入组件使用，请查看[单独引用](./examples/Stoneless.vue)

## 主题

提供三种主题，使用方法见 [VContextmenu](./docs/usage.md#vcontextmenu)

**默认**

![default](./docs/images/default.jpg)

**亮色**

![bright](./docs/images/bright.jpg)

**暗色**

![dark](./docs/images/dark.jpg)

## 开发

```bash
$ npm install
$ npm run dev
```

## 构建

```bash
$ npm run build:package # 构建 npm 包
$ npm run build:example # 构建示例站点
$ npm run build # build:package & build:example
```

## 更新日志

详见 [releases][url-releases]


[badge-npm-version]: https://img.shields.io/npm/v/v-contextmenu/next
[badge-language]: https://img.shields.io/github/languages/top/CyberNika/v-contextmenu
[badge-node-version]: https://img.shields.io/node/v/v-contextmenu/next
[badge-npm-download]: https://img.shields.io/npm/dt/v-contextmenu
[badge-license]: https://img.shields.io/github/license/CyberNika/v-contextmenu.svg

[url-npm]: https://npmjs.org/package/v-contextmenu
[url-dependencies]: https://david-dm.org/vkbansal/v-contextmenu
[url-releases]: https://github.com/CyberNika/v-contextmenu/releases
[url-github]: https://github.com/CyberNika/v-contextmenu
[url-homepage]: https://CyberNika.github.io/v-contextmenu

[image-npm]: https://nodei.co/npm/v-contextmenu.png

---
_Source: https://npm.io/package/v-contextmenu · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._