# e-vue-contextmenu

> 基于 vue 的鼠标右键菜单组件

Latest version **0.1.3** (published 2019-05-15) · MIT license · 0 weekly downloads

## Install

```sh
npm install e-vue-contextmenu
pnpm add e-vue-contextmenu
yarn add e-vue-contextmenu
bun add e-vue-contextmenu
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.3 |
| Published | 2019-05-15 |
| First published | 2019-03-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 201.3 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 16 |
| Author | 圣长伟 |
| Maintainers | shengchangwei |
| Keywords | vue, contextmenu, shengchangwei |

## Links

- npm: https://www.npmjs.com/package/e-vue-contextmenu
- Repository: https://github.com/ShengChangWei/e-vue-contextmenu
- Homepage: https://github.com/ShengChangWei/e-vue-contextmenu#readme
- Issues: https://github.com/ShengChangWei/e-vue-contextmenu/issues
- npm.io page: https://npm.io/package/e-vue-contextmenu

## Dependencies (1)

- [vue](https://npm.io/package/vue.md) ^2.6.6

## Recent versions

- 0.1.3 (latest) — 2019-05-15
- 0.1.1 — 2019-03-28

## README

# e-vue-contextmenu

基于 vue 的鼠标菜单事件,本组件提供菜单的显示和隐藏，可自定义菜单，以及菜单列的样式

## 展示
<img src="/images/contextMenu.gif" />

## Usage

1. Install

	```shell
	npm install --save e-vue-contextmenu@latest
	```
2. main.js

    ```shell
    import EVueContextmenu from 'e-vue-contextmenu'
    Vue.use(EVueContextmenu)
    ``
3. template

```html
    <div @contextmenu.stop.prevent="$refs.ctxshow.showMenu($event, data)">
        鼠标右键点击
    </div>
     <e-vue-contextmenu ref="ctxshow" id="contextStyle" @ctx-show="show" @ctx-hide="hide">
        <div @click="handlerSql">Sql数据操作</div>
        <div @click="hideMenu">打开表</div>
        <div>生成代码</div>
    </e-vue-contextmenu>
```
4. javascript

```javascript

    hideMenu() {
        this.$refs.ctxshow.hideMenu(); // 隐藏菜单
    }
    show(data) {
        console.log('菜单显示了')
    },
    hide(data) {
        console.log('菜单隐藏了')
    },
    handlerSql() {
        // 自定义事件
    }
```


## API

- showMenu 鼠标菜单显示方法，$event, data自定义参数，@ctx-show，@ctx-hide可接收到这个参数
- hideMenu 鼠标菜单隐藏方法，可通过this.$refs.ctxshow.hideMenu()调用
- ctx-show 鼠标菜单显示事件
- ctx-hide 鼠标菜单隐藏事件


## Develop

	```shell

	npm install // 安装依赖包
	
	npm start // 启动项目
    
	```

# License

[![MIT License](https://img.shields.io/badge/license-MIT-blue.svg?style=flat)](/LICENSE)

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