mirror of
https://github.com/tenrok/vue-context.git
synced 2026-05-17 08:29:35 +03:00
1.1 KiB
1.1 KiB
title, sort
| title | sort |
|---|---|
| Basic Usage | 1 |
Using the menu requires very little setup as shown below.
To use the context menu, you need to import it into your component and then create a trigger element to open the context menu on.
<template>
<div>
<p @contextmenu.prevent="$refs.menu.open">
Right click on me
</p>
<vue-context ref="menu">
<li>
<a @click.prevent="onClick($event.target.innerText)">
Option 1
</a>
</li>
<li>
<a @click.prevent="onClick($event.target.innerText)">
Option 2
</a>
</li>
</vue-context>
</div>
</template>
<script>
import VueContext from 'vue-context';
import 'vue-context/src/sass/vue-context.scss'; // Alternatively import into a stylesheet instead
export default {
components: { VueContext },
methods: {
onClick (text) {
alert(`You clicked "${text}"!`);
}
}
};
</script>