Iview-contextmenu NPM

iview-contextmenu

A contextmenu component depend on iview-dropdown component.

Demo

demo

Engilsh | 中文

Install

Using npm:

npm install iview-contextmenu

Usage

main.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:

<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

iview vue vue.js component components ui contextmenu

core-js vue

@everything-registry/sub-chunk-1943 @zalastax/nolb-iv

0.2.0

5 years ago

0.1.0

5 years ago