https://github.com/CyberNika/v-contextmenu

🖱 ContextMenu based on Vue 3 & Vue 2
https://github.com/CyberNika/v-contextmenu

contextmenu vue vue-component vue2 vue3

Last synced: about 2 months ago
JSON representation

🖱 ContextMenu based on Vue 3 & Vue 2

• Host: GitHub
• URL: https://github.com/CyberNika/v-contextmenu
• Owner: CyberNika
• License: mit
• Created: 2017-11-03T10:24:33.000Z (about 7 years ago)
• Default Branch: main
• Last Pushed: 2024-06-16T09:51:57.000Z (6 months ago)
• Last Synced: 2024-10-14T00:01:56.244Z (2 months ago)
• Topics: contextmenu, vue, vue-component, vue2, vue3
• Language: TypeScript
• Homepage: https://cybernika.github.io/v-contextmenu/
• Size: 6.32 MB
• Stars: 920
• Watchers: 5
• Forks: 113
• Open Issues: 43
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

• awesome - CyberNika/v-contextmenu - 🖱 ContextMenu based on Vue 3 & Vue 2 (TypeScript)

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 3.0** 的 **ContextMenu** 组件。

> 适用于 Vue 2.0 的文档见 https://github.com/CyberNika/v-contextmenu/blob/2.x/docs/usage.md

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

## 🚀 安装

### NPM 安装（推荐）

```bash

$ npm i -S v-contextmenu # yarn add v-contextmenu

```

### CDN 引入

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

```html

```

```javascript

// 全局注册

Vue.use(window.contextmenu);

// 或按需注册

const { directive, Contextmenu, ContextmenuItem } = window.contextmenu;

export default {

  directives: {

    contextmenu: directive,

  },

  components: {

    [Contextmenu.name]: Contextmenu,

    [ContextmenuItem.name]: ContextmenuItem,

  },

};

```

## 🏖 概览

[访问在线示例](https://CyberNika.github.io/v-contextmenu)

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

## 🎏 使用

### 全局注册

```javascript

import contextmenu from "v-contextmenu";

import "v-contextmenu/dist/themes/default.css";

Vue.use(contextmenu);

```

```html

  

    菜单1

    菜单2

    菜单3

  

  
右键点击此区域


```

### 按需注册

```HTML

  

    菜单1

    菜单2

    菜单3

  

  
右键点击此区域


import { directive, Contextmenu, ContextmenuItem } from "v-contextmenu";

import "v-contextmenu/dist/themes/default.css";

export default {

  directives: {

    contextmenu: directive,

  },

  components: {

    [Contextmenu.name]: Contextmenu,

    [ContextmenuItem.name]: ContextmenuItem,

  }

}

```

详细使用方法见 [在线站点][url-homepage] & [文档](./docs/usage.md)

## 🎨 主题

**默认**

`v-contextmenu/dist/themes/default.css`

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

**亮色**

`v-contextmenu/dist/themes/bright.css`

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

**暗色**

`v-contextmenu/dist/themes/dark.css`

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

## 🛠 开发

```bash

$ pnpm install # 安装依赖

$ pnpm dev # 启动开发服务

```

## 🤖 构建

```bash

$ pnpm build # 构建 npm 包

$ pnpm build:site # 构建站点

```

## 🛎 更新日志

详见 [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