vue原生办法自定义右键菜单

本文实例为大家分享了vue原生方法自定义右键菜单的具体代码，供大家参考，具体内容如下

1.在需要添加右键的页面，绑定contextmenu事件（阻止浏览器默认事件，添加自定义事件）

<div @contextmenu.prevent.native="openMenu($event)">
 ....
</div>

2.在页面编写右键菜单的内容

<ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
    <li @click="test">添加节点</li>
    <li @click="test">添加节点</li>
</ul>

3.在data()中定义需要的变量属性

data() {
  return {
   visible: false,
   top: 0,
   left: 0
  }
 }

4.创建监听事件，来触发关闭右键菜单的方法

watch: {
  visible(value) {
   if (value) {
    document.body.addEventListener('click', this.closeMenu)
   } else {
    document.body.removeEventListener('click', this.closeMenu)
   }
  }
 },

5.打开和关闭右键菜单的两个方法

//start
openMenu(e) {
 var x = e.pageX;
 var y = e.pageY;
 this.top = y;
 this.left = x;
 this.visible = true;//在这里控制右键菜单的打开
},
//close
closeMenu() {
 this.visible = false;
},

6.样式

.contextmenu {
 margin: 0;
 background: #fff;
 z-index: 3000;
 position: absolute;
 list-style-type: none;
 padding: 5px 0;
 border-radius: 4px;
 font-size: 12px;
 font-weight: 400;
 color: #333;
 box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
}

.contextmenu li {
 margin: 0;
 padding: 7px 16px;
 cursor: pointer;
}
.contextmenu li:hover {
 background: #eee;
}

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