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']
 };
}

具体的相关内容还有很多，因为项目赶的比较急，达到了业务需求就没有继续深究，在此贴一下官方链接

官方 链接

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持源码搜藏网。