微客导航 » 文章资讯 » vue中如何自定义右键菜单详解

vue中如何自定义右键菜单详解

2023-07-08 15:39:05 329

在所编辑的页面，需要添加右键菜单的元素，绑定contextmenu事件，如下：

在页面编写右键菜单内容:



内容

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

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

观察visible的变化，来触发关闭右键菜单，调用关闭菜单的方法

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

在method中定义打开右键菜单和关闭右键菜单的两个方法

openMenu(e,item){
this.rightClickItem=item;

letx=e.clientX;
lety=e.clientY;

this.top=y;
this.left=x;

this.visible=true;
},
closeMenu(){
this.visible=false;
}

在style中写右键菜单的样式

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

.contextmenuli{
margin:0;
padding:7px16px;
cursor:pointer;
}

.contextmenuli:hover{
background-color:rgb(3,125,243);;
color:white;
}

参考文档地址

到此这篇关于vue中如何自定义右键菜单详解的文章就介绍到这了,更多相关vue自定义右键菜单内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！

返回顶部
3162201930
czq8825@qq.com

vue中如何自定义右键菜单详解

热门推荐

随机推荐