Vue+element-ui添加自定义右键菜单的方法示例
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添加自定义右键菜单内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票!