Right click on me
New
Open
Save
Save As
Close
<template>
<vs-button @contextmenu.prevent="$refs.menu.open">Right click on me</vs-button>
<vue-context ref="menu">
<li>
<a href="#" @click="optionClicked($event.target.innerText)" class="flex items-center text-sm">
<feather-icon icon="PlusIcon" svgClasses="w-5 h-5" />
<span class="ml-2">New</span>
</a>
</li>
<li>
<a href="#" @click="optionClicked($event.target.innerText)" class="flex items-center text-sm">
<feather-icon icon="FileIcon" svgClasses="w-5 h-5" />
<span class="ml-2">Open</span>
</a>
</li>
<li>
<a href="#" @click="optionClicked($event.target.innerText)" class="flex items-center text-sm">
<feather-icon icon="SaveIcon" svgClasses="w-5 h-5" />
<span class="ml-2">Save</span>
</a>
</li>
<li>
<a href="#" @click="optionClicked($event.target.innerText)" class="flex items-center text-sm">
<feather-icon icon="SaveIcon" svgClasses="w-5 h-5" />
<span class="ml-2">Save As</span>
</a>
</li>
<li>
<a href="#" @click="optionClicked($event.target.innerText)" class="flex items-center text-sm">
<feather-icon icon="XIcon" svgClasses="w-5 h-5" />
<span class="ml-2">Close</span>
</a>
</li>
</vue-context>
</template>
<script>
import { VueContext } from 'vue-context';
export default {
components: {
VueContext
},
methods: {
optionClicked(text) {
this.$vs.notify({
title: 'Action Clicked',
text: text,
icon: 'feather',
iconPack: 'icon-alert-circle',
color: 'primary'
})
}
}
}
</script>