自定义右键菜单
2022-10-18 本文已影响0人
lvyweb
- html部分
<body @contextmenu="contextMenuHandle($event)">
<div class="context-menu" v-show="menuContentObj.displayContextMenu" :style="{'left': menuContentObj.clientX + 'px', 'top': menuContentObj.clientY + 'px'}">
<ul>
<li v-for="(item, i) in menuContentObj.menuContent" :key="i" @click="emitEvent(item)">
<span>{{item.name}}</span>
</li>
</ul>
</div>
</body>
- 定义变量部分
menuContentObj:{
menuContent: [{
'name':''
}], // 右键菜单内容
clientX: '0', // left
clientY: '0', // top
displayContextMenu:false
},
- 事件部分
contextMenuHandle(e){
e.preventDefault(); // 阻止默认事件
this.showContextMenu(e,{})
},
showContextMenu(event, data) {
// event.preventDefault(); // 阻止浏览器的默认事件
this.menuContentObj = {
menuContent: [
{
name: "提交",
},
{
name: "保存",
},
{
name: "驳回",
},
{
name: "取消",
},
],
clientX: event.clientX,
clientY: event.clientY,
displayContextMenu: true,
};
var $that = this;
document.addEventListener("click", function(){
$that.menuContentObj.displayContextMenu = false;
}, true);
},
emitEvent(node){
console.log('node--',node)
}
