# vuejs-contextmenu-lan

> vuejs-contextmenu-lan

Latest version **1.0.2** (published 2018-07-23) · MIT license · 0 weekly downloads

## Install

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

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.2 |
| Published | 2018-07-23 |
| First published | 2018-07-18 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 59.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | chingfanglin |
| Maintainers | chingfang |
| Keywords | vue, contextmenu |

## Links

- npm: https://www.npmjs.com/package/vuejs-contextmenu-lan
- Repository: https://github.com/chingfanglin/vuejs-contextmenu-lan
- Homepage: https://github.com/chingfanglin/vuejs-contextmenu-lan#readme
- Issues: https://github.com/chingfanglin/vuejs-contextmenu-lan/issues
- npm.io page: https://npm.io/package/vuejs-contextmenu-lan

## Recent versions

- 1.0.2 (latest) — 2018-07-23
- 1.0.12 — 2018-07-18
- 1.0.11 — 2018-07-18
- 1.0.1 — 2018-07-18
- 1.0.0 — 2018-07-18

## README

# vuejs-contextmenu-lan
> Contextmenu component for vue2

![Alt text](https://raw.githubusercontent.com/chingfanglin/vuejs-contextmenu-lan/master/docs/image/contextmenu1.png)

![Alt text](https://raw.githubusercontent.com/chingfanglin/vuejs-contextmenu-lan/master/docs/image/contextmenu2.png)


# Demo

* [Demo](https://chingfanglin.github.io/vuejs-contextmenu-lan/)
* [Code](https://github.com/chingfanglin/vuejs-contextmenu-lan)


# Installation (node.js)

    $ npm install vuejs-contextmenu-lan -s

    $ yarn add vuejs-contextmenu-lan

# Vue mount
    // mount with global
    import ContextMenu from 'vuejs-contextmenu-lan'
    Vue.use(ContextMenu)

# Usage

    <template>
      <div>
        <div @contextmenu.prevent="open('Test Area')">
          Test Area
        </div>
        <v-context-menu :data="contextMenuData"></v-context-menu>
      </div>
    </template>

    <script>
      export default {
        name: 'app',
        data () {
          return {
            contextMenuData: {
              menuData: {},
              menuName: 'content-menu',
              position: {
                x: null,
                y: null
              },
              menulists: [
                {
                  fnHandler: this.test1,  // Binding events
                  btnName: 'Test Class 1' // The name of the menu option
                },
                {
                  fnHandler: this.test2,
                  btnName: 'Test Class 2'
                },
                {
                  fnHandler: this.test3,
                  btnName: 'Test Class 3'
                },
                {
                  fnHandler: this.test4,
                  btnName: 'Test Class 4'
                },
                {
                  fnHandler: this.test5,
                  btnName: 'Test Class 5'
                }
              ]
            }
          }
        },
        methods: {
          open (val) {
            event.preventDefault()
            const x = event.clientX
            const y = event.clientY
            this.contextMenuData.position = { x, y }
            this.contextMenuData.menuData = val
          },
          test1 (val) {
            console.log('test1: ', val)
          },
          test2( val) {
            console.log('test2: ', val)
          },
          test3 (val) {
            console.log('test3: ', val)
          },
          test4 (val) {
            console.log('test4: ', val)
          },
          test5 (val) {
            console.log('test5: ', val)
          }
        }
      }
      </script>


# Authors
* [ChingFang Lin](https://github.com/chingfanglin)

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