vue右键菜单的简单封装
短信预约 -IT技能 免费直播动态提醒
本文实例为大家分享了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>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
