# iview-contextmenu

> A contextmenu component depend on iview-dropdown component

Latest version **0.2.0** (published 2019-06-06) · MIT license · 0 weekly downloads

## Install

```sh
npm install iview-contextmenu
pnpm add iview-contextmenu
yarn add iview-contextmenu
bun add iview-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.2.0 |
| Published | 2019-06-06 |
| First published | 2019-04-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >=8.9.1 |
| Dependencies | 2 |
| Unpacked size | 281.9 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | qmhc |
| Maintainers | qmhc |
| Keywords | iview, vue, vue.js, component, components, ui, contextmenu |

## Links

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

## Dependencies (2)

- [vue](https://npm.io/package/vue.md) ^2.6.10
- [core-js](https://npm.io/package/core-js.md) ^2.6.5

## Alternatives

- [@progress/kendo-ooxml](https://npm.io/package/@progress/kendo-ooxml.md) — 152.1K weekly downloads
- [@progress/kendo-react-ripple](https://npm.io/package/@progress/kendo-react-ripple.md) — 8.0K weekly downloads
- [@progress/kendo-react-orgchart](https://npm.io/package/@progress/kendo-react-orgchart.md) — 4.3K weekly downloads
- [@praxisui/dynamic-fields](https://npm.io/package/@praxisui/dynamic-fields.md) — 2.4K weekly downloads
- [@progress/kendo-vue-listbox](https://npm.io/package/@progress/kendo-vue-listbox.md) — 932 weekly downloads

## Recent versions

- 0.2.0 (latest) — 2019-06-06
- 0.1.0 — 2019-04-29

## README

# iview-contextmenu

[![version](https://img.shields.io/github/package-json/v/qmhc/iview-contextmenu.svg)](https://github.com/qmhc/iview-contextmenu)
[![NPM download](https://img.shields.io/npm/v/iview-contextmenu.svg)](https://www.npmjs.com/package/iview-contextmenu)
[![license](https://img.shields.io/github/license/qmhc/iview-contextmenu.svg)](http://opensource.org/licenses/MIT)

A contextmenu component depend on iview-dropdown component.

## Demo

![demo](./public/demo.gif)

**Engilsh** | [中文](./README_ZH.md)

## Install

Using npm:
```
npm install iview-contextmenu
```

## Usage

main.js:
```js
import Vue from 'vue'
import iView from 'iview'
import Contextmenu from 'iview-contextmenu'

import 'iview/dist/styles/iview.css'
import 'iview-contextmenu/dist/iview-contextmenu.css'

Vue.use(iView)
Vue.use(Contextmenu)
```

App.vue:
```vue
<template>
  <div
    id="app"
    @contextmenu.prevent="preventContextmenu"
  >
    <!-- It will respond to document contextmenu event when no set trigger = 'custom' -->
    <Contextmenu
      :menu-data="menuData"
      @on-select="handleSelect"
      @on-cancel="handleCancel"
    ></Contextmenu>
  </div>
</template>

<script>
export default {
  name: 'App',
  data () {
    return {
      menuData: [
        {
          title: 'Menu1',
          name: 'menu1'
        },
        {
          title: 'Menu2',
          name: 'menu2',
          shortcut: 'Ctrl+J'
        },
        {
          title: 'Menu3',
          name: 'menu3',
          divided: true,
          disabled: true
        }
      ]
    }
  },
  methods: {
    handleSelect (name) {
      console.log(`select contextmenu: ${name}`)
    },
    handleCancel () {
      console.log('cancel contextmenu')
    },
    preventContextmenu () {
      return false
    }
  }
}
</script>

<style>
* {
  box-sizing: border-box;
}
html, body {
  height: 100%;
}
body {
  overflow: hidden;
}
#app {
  height: 100%;
}
</style>
```

## Props

|Property|Desciption|Type|Default|
|---|---|---|---|
|menu-data|An Array that generates the contextmenu.|Array|-|
|trigger|Set to `'custom'` to control visible manually.|String|''|
|visible|Control the display of Contextmenu manually, used when `trigger = 'custom'`.|Boolean|false|

## Events

|Event Name|Description|Return Value|
|---|---|---|
|on-select|Emit when clicking the contextmenu item, the return value will be 'parentName-childName' when clicking the child menu.|ContextmenuItem's prefixName|
|on-cancel|Triggered when click the outside body.|-|

## Params

|Key|Description|Type|Default|
|---|---|---|---|
|title|Item's title.|String|-|
|name|Used to tag the item.|String|-|
|visible|Used to hidden the item.|Boolean|true|
|divided|Show spilt line.|Boolean|false|
|desabled|Used to disable the item.|Boolean|false|
|icon|Right icon Type, it will be ignored when item has children.|String|-|
|shortcut|Right text content, it wiil be ignored when right icon is set or item has children.|String|-|
|children|The son item|Array|-|
|prefix|Prefix the children name when to select item's children, default used name value when no set|String|-|

## License

[MIT](http://opensource.org/licenses/MIT)

Copyright (c) 2019-present, iview-contextmenu

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