Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/MicroDroid/vue-context-menu

Context menus for VueJS
https://github.com/MicroDroid/vue-context-menu

Last synced: about 1 month ago
JSON representation

Context menus for VueJS

Lists

README 

        
vue-context-menu

==============



> The plugin is VERY minimal and does NOT provide any styling or anything. This simplifies context menus implementation but that's it.



## Usage



There are **three** steps for using this plugin.



#### Step 1: Create context menu



```vue



  ...

  

    interesting stuff

  



  import ContextMenu from '@overcoder/vue-context-menu';

  

  export default {

    ...

    

    components: {

      ...

      ContextMenu,

    },

  };



```



#### Step 2: Trigger the menu



```vue

  
    

        
  •  contextMenu.open(event)">

          {{ cat.name }}

        
    • 

      


```



> Test it out, context menu should work now (assuming `cats`).



#### Step 3: Make it useful



Ok first of all you noticed the `event` is passed to `contextMenu.open` and this is to determine mouse location etc.



Now this plugin supports thing called **contexts**, here's an example:



```vue

  
    

        
  •  contextMenu.open(event, cat)">

          {{ cat.name }}

        
    • 

      


```



You can see we provided the `cat` as the second parameter to `contextMenu.open`. We gave it a context. Now you can access this context within the menu itself:



```vue

  

     

      

       

        



        {{ slotProps.ctx.name }}

      

    

  

```



That's all I think.



## Other things



- `close()` closes the menu

- You can also do `open()` without passing an event to open the menu at last position (defaults to 0,0)