https://github.com/johndatserakis/vue-simple-context-menu
📌 Simple context-menu component built for Vue. Works well with both left and right clicks. Nothing too fancy, just works and is simple to use.
https://github.com/johndatserakis/vue-simple-context-menu
click content menu right simple vue vue2 vue3 vuejs
Last synced: 25 days ago
JSON representation
📌 Simple context-menu component built for Vue. Works well with both left and right clicks. Nothing too fancy, just works and is simple to use.
- Host: GitHub
- URL: https://github.com/johndatserakis/vue-simple-context-menu
- Owner: johndatserakis
- License: mit
- Created: 2018-05-30T01:38:04.000Z (almost 7 years ago)
- Default Branch: develop
- Last Pushed: 2023-11-26T04:03:57.000Z (over 1 year ago)
- Last Synced: 2024-04-24T08:16:03.416Z (about 1 year ago)
- Topics: click, content, menu, right, simple, vue, vue2, vue3, vuejs
- Language: Vue
- Homepage: https://johndatserakis.github.io/vue-simple-context-menu/
- Size: 1.77 MB
- Stars: 231
- Watchers: 5
- Forks: 54
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# vue-simple-context-menu
Simple context-menu component built for Vue. Works well with both left and right clicks. Nothing too fancy, just works and is simple to use.
- [Demo](https://johndatserakis.github.io/vue-simple-context-menu/)
- [GitHub](https://github.com/johndatserakis/vue-simple-context-menu)
- [npm](https://www.npmjs.com/package/vue-simple-context-menu)
- [StackBlitz](https://stackblitz.com/edit/vue-chj3sg?file=src/App.vue)
## Vue 3 Support
Vue 3 is supported from `v4.0.0` and beyond (current `master`). To use `vue-simple-context-menu` with Vue 2, use `v3.4.2`.
## Install
```
yarn add vue-simple-context-menu
```
## About
Just a simple little menu to be shown where a click happens - closes after use automatically by clicking an option or outside of the menu. Multiple menus are supported - just make sure to use a unique string as your `element-id` prop value.
A nice feature that comes baked in is the menu placement after a click - it sits just ever so slightly under your click location - so that any hover style you had on the item that was clicked gets removed nicely. I modeled it after the macOS right click menu.
## Usage
```js
import { createApp } from 'vue';
import VueSimpleContextMenu from 'vue-simple-context-menu';
import 'vue-simple-context-menu/dist/vue-simple-context-menu.css';
const app = createApp(App);
app.component('vue-simple-context-menu', VueSimpleContextMenu);
```
```html
{{item.name}}
```
```js
handleClick (event, item) {
this.$refs.vueSimpleContextMenu.showMenu(event, item)
}
optionClicked (event) {
window.alert(JSON.stringify(event))
}
```
Note - you must pass the click event-info variable to the `showMenu()` function because that's how we know where to show the menu.
Note - make sure to use `@click.prevent.stop` (or `@contextmenu.prevent.stop` for right click) when setting up the click handler.
## Props
| prop | type | description | required |
| --------------- | ------ | -------------------------------------------------------------------------------------------- | -------- |
| `elementId` | String | Unique String that acts as the id of your menu. | Yes |
| `options` | Array | Array of menu options to show. Component will use the `name` parameter as the label. | Yes |
| `options.name` | String | Label for the option. | Yes |
| `options.class` | String | A custom class that will be applied to the option. | No |
| `options.type` | String | Only one possible value at the moment - `divider`. Pass this to set the object as a divider. | No |
| `ref` | String | Unique String that allows you to show the menu on command. | Yes |
## Methods
| method | parameters | description |
| ---------- | --------------------------------- | -------------------------------------------------------------------- |
| `showMenu` | event (MouseEvent), item (Object) | Used to show the menu. Make sure to pass a MouseEvent and an Object. |
## Events
| event | value | description |
| ---------------- | ------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `option-clicked` | Object | When a menu item is clicked the component will emit an event with a value containing the clicked item and the menu option that was clicked. Register for this event to capture the selection result. |
| `menu-closed` | | Emitted when the menu is closed |
## SASS Structure
```scss
.vue-simple-context-menu {
&--active {
}
&__item {
&:hover {
}
}
&__divider {
}
}
```
## Development
```bash
# Install dependencies
yarn
# Serve with hot reload
yarn dev
# Run the tests
yarn test
# Build demo page
yarn build:example
# Build library
yarn build:library
# Build everything and run tests
yarn build
```
## Other
Go ahead and fork the project! Submit an issue if needed. Have fun!
## Thank You
Influenced by [Lucas Calazans](https://codepen.io/lucascalazans)'s [pen](https://codepen.io/lucascalazans/pen/ALvVVw). Go ahead and check out his other work.
## License
[MIT](http://opensource.org/licenses/MIT)