取消原生右键事件

在 main.ts 函数中取消浏览器默认右键菜单：

window.oncontextmenu = () => { return false; };

组件模板

做一个不同区域右键点击之后不同菜单项的组件 
  
  
  
  
  
，创建组件模板：

<!-- ContextMenu --> <div ref="menu" class="l-menu"> <slot /> <Teleport to="#l-menu-container"> <div ref="panel" :id="l-menu__panel__ + milliseconds" :style="{ left: x + px, top: y + px }"> <div ref="head" class="l-menu__head"> <div class="l-menu__title"> <slot name="title" /> </div> <div @click="panel.style.display = none"> <i-ep-close /> </div> </div> <div class="l-menu__main"> <slot name="content" /> </div> </div> </Teleport> </div>

模板中使用了 Teleport
  
  
  
  
  
 ，需要把这一块传递到页面中 l-menu-container 元素中去
 


 


 


 


 


 ，这个元素在 body 下 
 
 
 
 
 
，意思是我的右键菜单组件呼出的面板不受父组件的样式影响
   
   
   
   
   
 ，包括移动的范围限制           、背景颜色等
 

 

 

 

 

 ，这些继承父元素样式都需要避免 
  
  
  
  
  
。

组件 setup

需要获取组件模板的一些引用：

// ContextMenu setup const menu = ref<HTMLElement>(); const head = ref<HTMLElement>(); const panel = ref<HTMLElement>(); const milliseconds = new Date().getMilliseconds(); const { x, y } = useDraggable(head); onMounted(() => { menu.value.onmouseup = e => { if (e.button == 2) { const container = document.querySelector("#l-menu-container"); const menuId = container.getAttribute("menu-id"); menuId && (document.getElementById(`l-menu__panel__${menuId}`).style.display = "none"); container.setAttribute("menu-id", `${milliseconds}`); panel.value.style.left = `${e.clientX}px`; panel.value.style.top = `${e.clientY}px`; panel.value.style.display = "block"; } }; });

鼠标按下放开事件 

 

 

 

 

 
，判断鼠标是左键还是右键           ，button 为 2 代表右键

 
 

 
 

 
 

 
 

 
 

 ，右键点击之后需要移除上一个开启的面板










，在 body 下的 #l-menu-container 元素上添加一个记录上一次面板的 id
  
  
  
  
  
 。

实现右键出来之后的菜单面板自由地在窗口中移动                 ，直接借助 VueUse useDraggable 函数：

const { x, y } = useDraggable(head);

得到鼠标移动的 x 和 y 值
 
 
 
 
 
 
 
 
 
 
 ，通过绑定 style 对 left 和 top 进行设置
















，就可以实现自由移动
 


 


 


 


 


 。

使用组件

该组件有三个插槽           ，一个默认插槽
  
 
  
 
  
 
  
 
  
 
  ，两个具名插槽 
 
 
 
 
 
。具名 content 插槽是菜单内容










，默认插槽是能呼出右键菜单面板的区域 
  
  
  
  
  
，哪个区域能呼出就在外面套一层 ContextMenu 组件：

<ContextMenu> <div class="item"> hello </div> <template #title>样式设置</template> <template #content> <BoxSetting /> </template> </ContextMenu>

实现效果