vue右键菜单的简单封装
作者：橡皮擦不掉的
这篇文章主要为大家详细介绍了vue右键菜单的简单封装，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了vue实现右键菜单封装的具体代码，供大家参考，具体内容如下
封装一个简单的右键菜单，要求右键处出现菜单，点击除了菜单部分可以关闭菜单。
组件
<template>
<div class="ContextMenu" @click="close" v-show="show">
<ul class="menuMain" ref="menuMain" :style="{ top: y, left: x }">
<slot></slot>
</ul>
</div>
</template>
<script>
export default {
name: "ContextMenu",
mounted() {
document.addEventListener("contextmenu", this.contextClick);
},
data() {
return {
x: "0px",
y: "0px",
show: false
};
},
methods: {
//右键事件
contextClick(e) {
//阻止默认事件
e.preventDefault();
this.show = true;
this.x = e.clientX + "px";
this.y = e.clientY + "px";
},
close(e) {
//判断点击区域是否是menuMain的子元素 如果不是则关闭菜单
if (!this.$refs.menuMain.contains(e.target)) {
this.show = false;
}
}
}
};
</script>
<style lang="less" scoped>
.ContextMenu {
position: fixed;
width: 100vw;
height: 100vh;
top: 0;
left: 0;
.menuMain {
position: fixed;
z-index: 100000;
list-style: none;
border-radius: 10px;
padding: 0;
margin: 0;
background-color: #f5f5f5;
overflow: hidden;
li{
padding: 20px;
cursor: pointer;
&:hover{
background-color: #bdbdbd;
}
}
}
}
</style>使用
<context-menu> <li>hello</li> <li>hello</li> </context-menu>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。