vue中自定义右键菜单插件怎么用

今天小编给大家分享一下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中自定义右键菜单插件怎么用”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注编程网精选频道。