Skip to content
A customizable context menu component built for Vue2, supporting fontawesome icons, auto right/bottom boundary detection.
Vue JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo
dist
src
.gitignore
README.md
demo.gif
package.json

README.md

Ki-vue-context

A customizable context menu component built for Vue2, supporting fontawesome icons, auto right/bottom boundary detection.

Demo

demo.gif demo on github

A built demo is provided in the directory /demo. Use any static website server to check it.

$ cd ./demo
# live-server for an example
$ live-server

Install

$ npm i @kiyoaki_w/vue-context

Usage Example

Global Registration

// main.js
import Vue from 'vue'
import kiContext from '@kiyoaki_w/vue-context'
Vue.use(kiContext)

Import fontawesome icons

Import fontawesome and all the icons you need in main.js.

// main.js
import { library } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { faArrowRight, faArrowLeft, faArrowUp, faArrowDown } from '@fortawesome/free-solid-svg-icons'
library.add(faArrowRight, faArrowLeft, faArrowUp, faArrowDown)
Vue.component('font-awesome-icon', FontAwesomeIcon)

Use it in your Vue project

<template>
  <div id="app" @click="hideContextMenu()" @contextmenu.prevent="showContextMenu($event)">
    ...
    <ki-context 
      ref="kiContext"
      minWidth='1em'
      maxWidth='15em'
      backgroundColor='#fbfbfb'
      fontSize='15px'
      textColor='#35495e'
      iconColor='#41b883'
      borderRadius='0.1'
    />
    ...
  </div>
</template>

<script>
export default {
  methods: {
    showContextMenu (event){
      let items = [
        {
          icon: "arrow-up",
          text: 'Default',
          click: () => {
            alert('Option0!')
          }
        },
        {
          icon: 'arrow-right',
          text: 'With divider',
          divider: true,
          click: () => {
            alert('Option2!')
          }
        },
        {
          icon: 'arrow-down',
          text: 'Disabled',
          disabled: true,
          click: () => {
            alert('Option3!')
          }
        },
      ];
      this.$refs.kiContext.show(event, items);
    },
    hideContextMenu (){
      this.$refs.kiContext.hide();
    }
  }
}
</script>

Props

prop type required default example from demo
minWidth String No 10em 10em
maxWidth String No 18em 15em
backgroundColor String No #ffffff #fbfbfb
fontSize String No inherit 15px
textColor String No inherit #35495e
iconColor String No inherit #41b883
borderRadius String No null 0.1em

Items

The array items defining the context menu consists of several item. The properties of item are listed here.

prop type required
text String Yes
icon String No
click function No
divider boolean No
disabled boolean No
You can’t perform that action at this time.