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>
相关文章
Valora
2021-03-03
Claire
2021-05-21
Abbie
2023-07-20
Yvonne
2023-07-20
Rasine
2023-07-20
Tina
2023-07-20
Kande
2023-07-20
Flower
2023-07-20
Heather
2023-07-20
Tertia
2023-07-20
Fredrica
2023-07-20
Katherine
2023-07-20
Genet
2023-07-20
Orianna
2023-07-20
Ora
2023-07-20
Fern
2023-07-20
Jacinda
2023-07-21
Kohana
2023-07-21