今天小编给大家分享一下vue中自定义右键菜单插件怎么用的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。
通过npm安装插件
计算
安全
数据库
网络和加速
企业服务
npm i vue-context -S在main.js中引入并注册
import Vue from 'vue';
import VueContext from 'vue-context';
new Vue({
components: {
VueContext
},在页面内使用
<div>
<p @contextmenu.prevent="$refs.menu.open">
Right click on me
</p>
</div>在需要绑定的元素使用@contextmenu.prevent="$refs.menu.open"进行右键绑定，在绑定的同时还可以传入相关的参数 如下：
<span @contextmenu.prevent="$refs.menu.open($event, {level: 'L0', or_gid:1, parentId:3})">菜单栏部分
<vue-context ref="menu">
<li @click.prevent=“”></li>
</vue-context>菜单栏主要是ul>li结构 项目中可以自己来设置样式
同时vue-context还具有有多个属性
closeOnClick 默认值为true 设置成false时鼠标点击菜单栏将不会自动关闭
closeOnScroll 默认值为true 设置成false时鼠标点击菜单栏将不会自动关闭
<vue-context ref="menu"
:close-on-click="closeOnClick"
:close-on-scroll="closeOnScroll"
:lazy="lazy"
:role="role"
:tag="tag"
:item-selector="itemSelector"
>
<li>
<a class="custom-item-class">Option 1</a>
</li>
<li>
<a class="custom-item-class">Option 2</a>
</li>
</vue-context>
// data里面的数据
data () {
return {
// when set to true, the context menu will close when clicked on
closeOnClick: true,
// when set to true, the context menu will close when the window is scrolled
closeOnScroll: true,
// When false, the context menu is shown via v-show and will always be present in the DOM
lazy: false,
// The `role` attribute on the menu. Recommended to stay as `menu`
role: 'menu',
// The root html tag of the menu. Recommended to stay as `ul`
tag: 'ul',
// This is how the component is able to find each menu item. Useful if you use non-recommended markup
itemSelector: ['.custom-item-class']
};
}以上就是“vue中自定义右键菜单插件怎么用”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注亿速云行业资讯频道。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
