# vuejs-contextmenu

> [![Greenkeeper badge](https://badges.greenkeeper.io/maple3142/vuejs-contextmenu.svg)](https://greenkeeper.io/) > vue.js contextmenu wrapper (currently unstable)

Latest version **0.1.3** (published 2018-06-20) · MIT license · 0 weekly downloads

## Install

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

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.3 |
| Published | 2018-06-20 |
| First published | 2017-11-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 20.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | maple3142 |

## Links

- npm: https://www.npmjs.com/package/vuejs-contextmenu
- npm.io page: https://npm.io/package/vuejs-contextmenu

## Recent versions

- 0.1.3 (latest) — 2018-06-20
- 0.1.2 — 2017-12-02
- 0.1.1 — 2017-12-02
- 0.1.0 — 2017-11-28
- 0.0.1 — 2017-11-26

## README

# vuejs-contextmenu

[![Greenkeeper badge](https://badges.greenkeeper.io/maple3142/vuejs-contextmenu.svg)](https://greenkeeper.io/)
> vue.js contextmenu wrapper (currently unstable)

[![Build Status](https://travis-ci.org/maple3142/vuejs-contextmenu.svg?branch=master)](https://travis-ci.org/maple3142/vuejs-contextmenu)

## Usage
### <script>

```html
<script src="https://unpkg.com/vue"></script>
<!--path to vuejsContextmenu(.min).js-->
<script src="./dist/vuejsContextmenu.min.js"></script>
<div id="app">
  <ctxmenu>
    <ul class="list" slot="ctxmenu">
      <li class="listitem">
        <a href="https://www.google.com/">Google</a>
      </li>
      <li class="listitem">
        <a href="https://www.facebook.com/">Facebook</a>
      </li>
    </ul>
    <div class="box">box1</div>
    This text doesn't have custom contextmenu
    <br>
    <span>But this text have custom contextmenu</span>
  </ctxmenu>
</div>
```

```javascript
//global
Vue.component('ctxmenu', window.vuejsContextmenu)
const app = new Vue({
  el: '#app'
})
```

### &lt;script type="module">

```html
<script type="module">
  //vuejsContextmenu.es.js is build for es6
  import vuejsContextmenu from './dist/vuejsContextmenu.es.js'
  Vue.component('ctxmenu', vuejsContextmenu)
  const app = new Vue({
    el: '#app'
  })
</script>
```

## [Example](https://rawgit.com/maple3142/vuejs-contextmenu/master/example.html)
Example use all the features this component can provide.

## API (May change)
### Slots
#### `default`
Contents in `default` slot will displayed normally

Right click/long press(mobile) will trigger contextmenu
#### `ctxmenu`
`ctxmenu` slot will be wrapped in a invisible `div.ctxmenu`

It will appear when being triggered, and disappeared when next click.
### Events
#### `open`
Triggerd after context menu opened.
#### `close`
Triggerd after context menu closed.

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