vue3实现右键自定义菜单栏功能

1. 先写好自定义菜单，可以复制我的

<template>
  <div @contextmenu="rightClicked($event)">右击</div>
  <div :class="{ isShow: myMenuVisible }" class="myMenu">
    <ul>
      <li @click.stop="close('all')">关闭全部</li>
      <li @click.stop="close('others')">关闭其他</li>
    </ul>
  </div>
</template>

<script setup>
import {ref,reactive} from "vue"
let myMenuVisible = ref(false); //表示是否显示右键的菜单栏
const rightClicked = (e) => {
  //右击之后阻止默认事件（必不可少），关闭原来的右键菜单
  e.preventDefault();
  myMenuVisible.value = true; //然后打开写好的自定义菜单
  let myMenu = document.querySelector(".myMenu"); //再获取菜单标签
  myMenu.style.top = `${e.clientY}px`; //赋值菜单的x和y值
  myMenu.style.left = `${e.clientX}px`;
};
//监听document文档流，点击左键时关闭菜单栏，第六行和第七行的事件要加上.stop后缀名，用来阻止冒泡
document.addEventListener("click", () => {
  myMenuVisible.value = false;
});
//点了自定义菜单的操作
const close = (type) => {
  if (type == "all") {
    //点了全部关闭的逻辑
    console.log(type);
    myMenuVisible.value = false;
  } else {
    //点了关闭其他的逻辑
    console.log(type);
    myMenuVisible.value = false;
  }
};
</script>

<style lang="less">
//这里用到less处理，没下载的要先下载一下
.myMenu {
  position: absolute;
  top: 0;
  left: 0;
  // width: 150px;
  background-color: #fff;
  box-sizing: border-box;
  padding: 10px;
  box-shadow: 0 0 8px 0px rgba(0, 0, 0, 0.3);
  border-radius: 5px;
  display: none;
  > ul {
    list-style: none;
    font-size: 14px;
    color: #666;
    li {
      font-size: 13px;
      margin: 3px 0;
    }
    > li:hover {
      background-color: #eee;
      cursor: pointer;
    }
  }
}
.isShow {
  display: block;
}
</style>

效果：

很棒