https://github.com/timwis/vue-lil-context-menu

A flexible context menu component for Vue
https://github.com/timwis/vue-lil-context-menu

context-menu menu vue vuejs

Last synced: 8 months ago
JSON representation

A flexible context menu component for Vue

• Host: GitHub
• URL: https://github.com/timwis/vue-lil-context-menu
• Owner: timwis
• License: mit
• Created: 2017-06-03T17:10:22.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2017-09-05T17:25:10.000Z (over 8 years ago)
• Last Synced: 2024-04-24T22:21:10.213Z (over 1 year ago)
• Topics: context-menu, menu, vue, vuejs
• Language: Vue
• Homepage:
• Size: 8.79 KB
• Stars: 13
• Watchers: 6
• Forks: 5
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

• awesome-vue-zh - Vue-律上下文菜单 - Vue的灵活lil上下文菜单组件. (UI组件 / 形成)
• awesome-vue - vue-lil-context-menu - A flexible lil context menu component for Vue. (Components & Libraries / UI Components)
• awesome-vue - vue-lil-context-menu ★9 - A flexible lil context menu component for Vue. (UI Components / Form)
• awesome-vue - vue-lil-context-menu - A flexible lil context menu component for Vue. (UI Components / Form)
• awesome-vue - vue-lil-context-menu - A flexible context menu component for Vue (UI Components [🔝](#readme))

README

          
# vue-lil-context-menu

A flexible context menu component for Vue. Pass it any menu template you like;

it doesn't even have to be a menu. Always disappears when you expect it

to by using an `onblur` event.

```html



  ...



  


    
Option A

    
Option B

  


const contextMenu = require('vue-lil-context-menu')

module.exports = {

  components: {

    'context-menu': contextMenu

  },

  methods: {

    onClick (opt) {

      console.log('Clicked', opt)

    }

  }

}

.options {

  width: 250px;

  border: 1px black solid;

}

```

If you'd like to pass any context from the original `oncontextmenu`

event down to your menu template, you can pass it as the second

param of `open` and access it within a [scoped slot](https://vuejs.org/v2/guide/components.html#Scoped-Slots)

under the `userData` property. For example:

```html



  ...



  

    
Option A

    
Option B

  


```

## Related

- [vue-context-menu](https://github.com/vmaimone/vue-context-menu)