微客导航 » 文章资讯 » Vue+element-ui添加自定义右键菜单的方法示例

Vue+element-ui添加自定义右键菜单的方法示例

2023-07-08 15:43:05 337

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

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


上移一层
下移一层

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

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

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

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

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

openMenu(e){
constmenuMinWidth=105
constoffsetLeft=this.$el.getBoundingClientRect().left//containermarginleft
constoffsetWidth=this.$el.offsetWidth//containerwidth
constmaxLeft=offsetWidth-menuMinWidth//leftboundary
constleft=e.clientX-offsetLeft//15:marginright

if(left>maxLeft){
this.left=maxLeft
}else{
this.left=left
}

this.top=e.clientY-60//fix位置bug
this.visible=true
},
closeMenu(){
this.visible=false
}

6、在style中写右键菜单的样式

.contextmenu{
margin:0;
background:#fff;
z-index:3000;
position:absolute;
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);
li{
margin:0;
padding:7px16px;
cursor:pointer;
&:hover{
background:#eee;
}
}
}

注意：.native修饰符对vue组件元素监听原生事件有效，对原生的html元素使用，反而没有效果。

到此这篇关于Vue+element-ui添加自定义右键菜单的文章就介绍到这了,更多相关Vue+element-ui添加自定义右键菜单内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！

返回顶部
3162201930
czq8825@qq.com

Vue+element-ui添加自定义右键菜单的方法示例

热门推荐

随机推荐