Right click on me - Do not close
Next
Previous
Increase
Decrease
Random
<template>
<vs-button @contextmenu.prevent="$refs.menu.open">Right click on me - Do not close</vs-button>
<vue-context ref="menu" :closeOnClick="false">
<ul class="bordered-items p-0">
<li>
<a href="#" @click="optionClicked($event.target.innerText)" class="flex items-center text-sm">
<feather-icon icon="ChevronRightIcon" svgClasses="w-5 h-5" />
<feather-icon :icon="$vs.rtl ? 'ChevronLeftIcon' : 'ChevronRightIcon'" svgClasses="w-5 h-5" />
</a>
</li>
<li>
<a href="#" @click="optionClicked($event.target.innerText)" class="flex items-center text-sm">
<feather-icon icon="ChevronLeftIcon" svgClasses="w-5 h-5" />
<feather-icon :icon="$vs.rtl ? 'ChevronRightIcon' : 'ChevronLeftIcon'" svgClasses="w-5 h-5" />
</a>
</li>
<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">Increase</span>
</a>
</li>
<li>
<a href="#" @click="optionClicked($event.target.innerText)" class="flex items-center text-sm">
<feather-icon icon="MinusIcon" svgClasses="w-5 h-5" />
<span class="ml-2">Decrease</span>
</a>
</li>
<li>
<a href="#" @click="optionClicked($event.target.innerText)" class="flex items-center text-sm">
<feather-icon icon="ShuffleIcon" svgClasses="w-5 h-5" />
<span class="ml-2">Random</span>
</a>
</li>
</ul>
</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>