设置右键菜单

<div @contextmenu.prevent="openCustomMenu">
  <!-- 右键区域 -->
</div>

<!-- 右键菜单 -->
<div v-if="menuVisible" class="right_click_s" :style="menuPosition">
  <ul>
    <li @click="handle_action('action1')">action</li>
  </ul>
</div>

const menuVisible = ref(false);
const menuPosition = ref({ top: "0", left: "0" });
function openCustomMenu(event: any) {
  event.preventDefault();
  menuVisible.value = true;
  menuPosition.value = {
    top: `${event.clientY}px`,
    left: `${event.clientX}px`,
  };
}

function handle_action(action: any) {
  if (action == "action1") {
    // 操作
  }
  menuVisible.value = false;
}

// 监听页面点击事件，关闭右键菜单
const handleClick = () => {
  // 处理点击事件的逻辑
  menuVisible.value = false;
};
onMounted(() => {
  document.addEventListener("click", handleClick);
});
onBeforeUnmount(() => {
  document.removeEventListener("click", handleClick);
});