上图中右键菜单的选项并不是固定不变的，它会根据不同的元素或场景来显示不同的选项。

也就是说，菜单的内容和大小都是动态生成的，而不是预先设定好的。

这就给我们调整菜单位置带来了一定的难度，不过当你看完这篇文章所有的问题都不再是问题。

分析问题

遇事不决先画图，我们要解决的问题本质上就是菜单生成的位置，所以我们画个图来找一下头绪：

我们通过上图可以知道，菜单能否在视口中放得下，取决于两个条件：

1. windowW(视口宽度) - mouseX(鼠标 x 坐标) > menuW(菜单宽度)
2. windowH(视口高度) - mouseY(鼠标 y 坐标) > menuH(菜单高度)

当同时满足这两个条件的时候说明菜单放得下，那我们就要思考如果不满足条件的时候怎么办了。

如果不满足条件一说明宽度放不下，那我们就让菜单生成到鼠标的左边 mouseX - menuW，就像下图这样。

<template>   <div ref="containerRef">     <slot></slot>     <Teleport to="body">       <div v-if="showMenu" class="context-menu" :style="{         left: mouseX + 'px',         top: mouseY + 'px',         }">         <div class="menu-list">           <div @click="handleClick(item)" class="menu-item" v-for="(item, i) in menu" :key="item.label">             {{ item.label }}           </div>         </div>       </div>     </Teleport>   </div> </template> <script setup>   import { ref } from 'vue';   import useContextMenu from './useContextMenu';   const props = defineProps({     menu: {       type: Array,       default: () => [],     },   });   const containerRef = ref(null);   const { mouseX, mouseY, showMenu } = useContextMenu(containerRef);    function handleClick() {     showMenu.value = false;   } </script>

看到我们现在是直接将鼠标的坐标赋值给了菜单，那么接下来就要给菜单一个经过计算的合适位置。

我们知道视口的大小、鼠标的位置、菜单的大小都是会变化的，所以这几个数据都要是响应式。

现在仅仅知道鼠标的位置，还需要知道视口与菜单的大小。

视口大小我们写一个函数来监听视口大小的变化:

import { ref } from "vue"; const windowW = ref(document.documentElement.clientWidth); const windowH = ref(document.documentElement.clientHeight);  window.addEventListener("resize", () => {   windowW.value = document.documentElement.clientWidth;   windowH.value = document.documentElement.clientHeight; });  export default function () {   return {     windowW,     windowH,   }; }

const map = new WeakMap(); const ob = new ResizeObserver((entries) => {   for (const entry of entries) {     // 这个元素对应的回调函数？     const handler = map.get(entry.target);     if (handler) {       const box = entry.borderBoxSize[0];       handler({         width: box.inlineSize,         height: box.blockSize,       });     }   } });  export default {   mounted(el, binding) {     // 监视尺寸变化     ob.observe(el);     map.set(el, binding.value);   },   unmounted(el) {     // 取消监听     ob.unobserve(el);   }, };