封装右键菜单组件-Vue3右键菜单在实际生活中随处可见，电脑桌面，文件夹，浏览器中使用右键，都可以唤醒对应的菜单选项，随

引言

右键菜单在实际生活中随处可见，电脑桌面，文件夹，浏览器中使用右键，都可以唤醒对应的菜单选项，随后会实现一个可以在自定义区域中唤醒的菜单组件，最终效果如下，完整代码

API 设计

经常封装组件的同学都知道，组件的设计很大程度上能够决定组件的实用性，可拓展性，下面是一个 badcase，因为在该组件中，首先需要明确的就是区域的范围，而下面这种情况则很难确定区域

<div>
    <ContextMenu/>
</div>

所以可以采用插槽的方式，将目标区域传入，代码如下

<ContextMenu>
    <div/>
</ContextMenu>

既然组件使用形态已经设计完毕，那么可以初步写出代码

// ContextMenu.vue

<template>
  <div class="context-wrapper" ref="wrapper">
    <slot />
    <div
      v-show="isShow"
      class="context-list"
      :style="computedStyle"
      ref="menu"
    >
      <div
        class="item"
        v-for="(item, index) in menuList"
        :key="index"
        @click="handleClick(item)"
      >
        {{ item }}
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";

const props = defineProps({
  modelValue: {
    type: String,
    default: "",
  },
  menuList: {
    type: Array,
    default: () => [],
  },
});
const emit = defineEmits(["update:modelValue"]);
const wrapper = ref(null);
const menu = ref(null);
const isShow = ref(false);
const handleClick = (val) => {
  emit("update:modelValue", val);
};
</script>

基础逻辑实现

首先需要实现基础的 css 以及正常的关闭和打开，首先要为 context-list 元素添加一个固定定位，这里预留了动态样式 computedStyle，后续需要跟随鼠标点击位置变化，有如下代码

.context-list {
    position: fixed;
    z-index: 9999;
}

看起来定位的问题已经被解决，但是由于开发的是通用型组件，需要详细了解下 fixed 定位的特性，以下出自 MDN

元素会被移出正常文档流，并不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时，元素会出现在的每页的固定位置。fixed 属性会创建新的层叠上下文。当元素祖先的 transform、perspective、filter 或 backdrop-filter 属性非 none 时，容器由视口改为该祖先

如果使用该组件时，父元素设置了以上 css 属性，那么菜单的定位祖先将不再是视口，换句话说，定位一定会发生错误，解法也很简单，只需要使用 Teleport 组件，使其变成 body 的子元素

接下来解决菜单跟随鼠标的需求，利用鼠标点击位置，获得菜单的具体定位，也就是上文所提到的 computedStyle，可以封装 hooks，wrapper 是组件的最外层元素，代表交互区域，代码如下

export const useContextMenu = (wrapper) => {
  const isShow = ref(false);
  const computedStyle = ref({});
  const x = ref(0);
  const y = ref(0);

  const getBoundingClientRect = (el) => {
    return el.getBoundingClientRect();
  };

  const adjustPosition = (
    clientX,
    clientY,
  ) => {
    let newTop = clientY;
    let newLeft = clientX;
    return {
      top: `${newTop}px`,
      left: `${newLeft}px`,
    };
  };

  onMounted(() => {
    wrapper.value.addEventListener("contextmenu", menuHandler);
  });

  onBeforeUnmount(() => {
    wrapper.value.removeEventListener("contextmenu", menuHandler);
  });

  const menuHandler = (e) => {
    e.preventDefault();
    e.stopPropagation();
    isShow.value = true;
    x.value = e.clientX;
    y.value = e.clientY;
    changeStyle();
  };

  const changeStyle = () => {
    const adjustedPosition = adjustPosition(
      x.value,
      y.value,
    );
    computedStyle.value = adjustedPosition;
  };

  const clickHandler = () => {
    isShow.value = false;
  };

  return {
    computedStyle,
    isShow,
  };
};

声明 x，y 变量存储鼠标的点击位置，isShow 决定菜单是否展示，computedStyle 存储菜单位置，通过监听 contextmenu 事件，打开菜单，需要注意，首先要取消事件的默认行为，否则会打开浏览器的原生右键菜单，其次需要阻止冒泡，因为右键菜单可以嵌套使用，如果不阻止冒泡，子元素右键菜单的唤醒会引起父元素的右键菜单，示例如下

<ContextMenu v-model="selected" :menuList="list">
  <div class="area">
    <h4>当前选中值：{{ selected }}</h4>
    <ContextMenu v-model="childValue" :menuList="childList">
      <div class="child">
        <h4>当前选中值：{{ childValue }}</h4>
      </div>
    </ContextMenu>
  </div>
</ContextMenu>

目前菜单已经可以正常展示，但是无法关闭，需要处理一下 window 的点击事件，代码如下，由于在 menuHandler 中阻止了冒泡，所以 window 的 contextmenu 监听需要在捕获阶段完成，click 事件也需要在捕获阶段处理，因为如果父元素书写了 @click.stop 的代码，此处的 click 事件也无法生效，在捕获阶段处理比较保险

const menuHandler = (e) => {
    e.preventDefault();
    e.stopPropagation();
    isShow.value = true;
    x.value = e.clientX;
    y.value = e.clientY;
};
const clickHandler = () => {
    isShow.value = false;
};
onMounted(() => {
    wrapper.value.addEventListener("contextmenu", menuHandler);
    window.addEventListener("click", clickHandler, true);
    window.addEventListener("contextmenu", clickHandler, true);
});

onBeforeUnmount(() => {
    wrapper.value.removeEventListener("contextmenu", menuHandler);
    window.removeEventListener("click", clickHandler, true);
    window.removeEventListener("contextmenu", clickHandler, true);
});

至此，已经完成了菜单的正常打开与关闭，完整代码如下

export const useContextMenu = (wrapper, menu, options = {}) => {
  const isShow = ref(false);
  const computedStyle = ref({});
  const x = ref(0);
  const y = ref(0);

  const getBoundingClientRect = (el) => {
    return el.getBoundingClientRect();
  };

  const adjustPosition = (
    clientX,
    clientY,
  ) => {
    let newTop = clientY;
    let newLeft = clientX;
    return {
      top: `${newTop}px`,
      left: `${newLeft}px`,
    };
  };

  onMounted(() => {
    wrapper.value.addEventListener("contextmenu", menuHandler);
    window.addEventListener("click", clickHandler, true);
    window.addEventListener("contextmenu", clickHandler, true);
  });

  onBeforeUnmount(() => {
    wrapper.value.removeEventListener("contextmenu", menuHandler);
    window.removeEventListener("click", clickHandler, true);
    window.removeEventListener("contextmenu", clickHandler, true);
  });

  const menuHandler = (e) => {
    e.preventDefault();
    e.stopPropagation();
    isShow.value = true;
    x.value = e.clientX;
    y.value = e.clientY;
    changeStyle();
  };

  const changeStyle = () => {
    const adjustedPosition = adjustPosition(
      x.value,
      y.value,
    );
    computedStyle.value = adjustedPosition;
  };

  const clickHandler = () => {
    isShow.value = false;
  };

  return {
    computedStyle,
    isShow,
  };
};

补充功能

以上实现了一个基础的右键菜单组件，但在实际开发中，往往还有一些定制化需求，这里挑两点实现

1. 实现打开动画
2. 实现边界判定（目前只实现右边界和下边界）

实现打开动画

先来看第一点，css 动画的本质就是某个属性的值的变化，每一帧按照当前属性值对元素进行渲染，连贯起来就形成了动画，这里实现高度动画，很容易得到一个思路，高度要从 0 变化到最终的高度值，可以写出如下代码

<template>
  <div class="context-wrapper" ref="wrapper">
    <slot />
    <Teleport to="body">
      <Transition
        @before-enter="onBeforeEnter"
        @enter="onEnter"
        @after-enter="onAfterEnter"
      >
        <div
          v-show="isShow"
          class="context-list"
          :style="computedStyle"
          ref="menu"
        >
          <div
            class="item"
            v-for="(item, index) in menuList"
            :key="index"
            @click="handleClick(item)"
          >
            {{ item }}
          </div>
        </div>
      </Transition>
    </Teleport>
  </div>
</template>

使用 vue 提供的 Transition 组件来实现动画，其提供了若干钩子函数

• before-enter，在元素被插入到 DOM 之前被调用
• enter，在元素被插入到 DOM 之后的下一帧被调用
• after-enter，当进入过渡完成时调用

明确了钩子函数的使用方式，其实思路就是如何获取菜单的最终高度，以及后续如何实现动画，先来看第一步

const onBeforeEnter = (el) => {
    el.style.height = 0;
};
const onEnter = (el) => {
    el.style.height = "auto";
    const height = el.offsetHeight;
};

在元素被插入到 dom 之前，将高度设置为 0，然后在元素被插入到 dom 之后的下一帧中，设置元素的高度为 auto，因为修改了元素高度，会触发重绘，此时就可以拿到元素的高度，然后就可以实现过渡效果了，这里需要借助 requestAnimationFrame，先来看看 MDN 的定义

requestAnimationFrame 方法会告诉浏览器你希望执行一个动画。它要求浏览器在下一次重绘之前，调用用户提供的回调函数

修改后的代码如下

const onBeforeEnter = (el) => {
    el.style.height = 0;
};
const onEnter = (el) => {
    el.style.height = "auto";
    const height = el.offsetHeight;
    el.style.height = 0;
    requestAnimationFrame(() => {
      el.style.transition = ".5s";
      el.style.height = height + "px";
    });
};
const onAfterEnter = (el) => {
    el.style.transition = "none";
};

拿到元素高度之后，将高度设置为 0，然后在 requestAnimationFrame 中设置高度和 transition，完成动画，是一个以退为进的操作，需要注意在动画效果完成后，重置 transition 属性，否则关闭菜单时，也会应用 transition 的延时，增加高度动画后，完整代码如下

export const useContextMenu = (wrapper, menu, options = {}) => {
  const isShow = ref(false);
  const computedStyle = ref({});
  const x = ref(0);
  const y = ref(0);

  const getBoundingClientRect = (el) => {
    return el.getBoundingClientRect();
  };

  const adjustPosition = (
    clientX,
    clientY,
  ) => {
    let newTop = clientY;
    let newLeft = clientX;
    return {
      top: `${newTop}px`,
      left: `${newLeft}px`,
    };
  };

  onMounted(() => {
    wrapper.value.addEventListener("contextmenu", menuHandler);
    window.addEventListener("click", clickHandler, true);
    window.addEventListener("contextmenu", clickHandler, true);
  });

  onBeforeUnmount(() => {
    wrapper.value.removeEventListener("contextmenu", menuHandler);
    window.removeEventListener("click", clickHandler, true);
    window.removeEventListener("contextmenu", clickHandler, true);
  });

  const menuHandler = (e) => {
    e.preventDefault();
    e.stopPropagation();
    isShow.value = true;
    x.value = e.clientX;
    y.value = e.clientY;
    changeStyle();
  };

  const changeStyle = () => {
    const adjustedPosition = adjustPosition(
      x.value,
      y.value,
    );
    computedStyle.value = adjustedPosition;
  };

  const onBeforeEnter = (el) => {
    el.style.height = 0;
  };
  const onEnter = (el) => {
    el.style.height = "auto";
    const height = el.offsetHeight;
    el.style.height = 0;
    requestAnimationFrame(() => {
      el.style.transition = ".5s";
      el.style.height = height + "px";
    });
  };
  const onAfterEnter = (el) => {
    el.style.transition = "none";
  };

  const clickHandler = () => {
    isShow.value = false;
  };

  return {
    computedStyle,
    isShow,
    onBeforeEnter,
    onEnter,
    onAfterEnter,
  };
};

实现边界判定（目前只实现右边界和下边界）

接下来实现第二点，核心思路为将菜单的位置和容器的边界做对比，根据对比结果，修改菜单的位置，代码如下

const changeStyle = () => {
    const { width, height } = getBoundingClientRect(menu.value);
    if (!width || !height) return;
    const wrapperRect = getBoundingClientRect(wrapper.value);
    const adjustedPosition = adjustPosition(
      x.value,
      y.value,
      width,
      height,
      wrapperRect
    );
    computedStyle.value = adjustedPosition;
};
const adjustPosition = (
    clientX,
    clientY,
    menuWidth,
    menuHeight,
    wrapperRect
) => {
    let newTop = clientY;
    let newLeft = clientX;
    // 检查是否超出右侧边界
    if (rightBoundary && newLeft + menuWidth > wrapperRect.right) {
      newLeft = newLeft - menuWidth;
    }
    // 检查是否超出底部边界
    if (bottomBoundary && newTop + menuHeight > wrapperRect.bottom) {
      newTop = newTop - menuHeight;
    }
    return {
      top: `${newTop}px`,
      left: `${newLeft}px`,
    };
};

menu 为菜单元素，wrapper 为交互区域，通过分别获取其位置，在 adjustPosition 中进行对比，动态修改 top，left 的值，需要注意，此时 changeStyle 不可以在 menuHandler 中调用，因为添加了动画，此时还无法获取到最终的高度，需要在 onEnter 中设置了元素的高度为 auto 之后，方可获取最终的元素高度，将边界检测封装为参数，完整代码如下

// useContextMenu.js
const defaultOptions = {
  rightBoundary: true,
  bottomBoundary: true,
};
export const useContextMenu = (wrapper, menu, options = {}) => {
  const { rightBoundary, bottomBoundary } = { ...defaultOptions, ...options };
  const isShow = ref(false);
  const computedStyle = ref({});
  const x = ref(0);
  const y = ref(0);

  const getBoundingClientRect = (el) => {
    return el.getBoundingClientRect();
  };

  const adjustPosition = (
    clientX,
    clientY,
    menuWidth,
    menuHeight,
    wrapperRect
  ) => {
    let newTop = clientY;
    let newLeft = clientX;
    // 检查是否超出右侧边界
    if (rightBoundary && newLeft + menuWidth > wrapperRect.right) {
      newLeft = newLeft - menuWidth;
    }
    // 检查是否超出底部边界
    if (bottomBoundary && newTop + menuHeight > wrapperRect.bottom) {
      newTop = newTop - menuHeight;
    }
    return {
      top: `${newTop}px`,
      left: `${newLeft}px`,
    };
  };

  onMounted(() => {
    wrapper.value.addEventListener("contextmenu", menuHandler);
    window.addEventListener("click", clickHandler, true);
    window.addEventListener("contextmenu", clickHandler, true);
  });

  onBeforeUnmount(() => {
    wrapper.value.removeEventListener("contextmenu", menuHandler);
    window.removeEventListener("click", clickHandler, true);
    window.removeEventListener("contextmenu", clickHandler, true);
  });

  const menuHandler = (e) => {
    e.preventDefault();
    e.stopPropagation();
    isShow.value = true;
    x.value = e.clientX;
    y.value = e.clientY;
  };

  const changeStyle = () => {
    const { width, height } = getBoundingClientRect(menu.value);
    if (!width || !height) return;
    const wrapperRect = getBoundingClientRect(wrapper.value);
    const adjustedPosition = adjustPosition(
      x.value,
      y.value,
      width,
      height,
      wrapperRect
    );
    computedStyle.value = adjustedPosition;
  };

  const onBeforeEnter = (el) => {
    el.style.height = 0;
  };
  const onEnter = (el) => {
    el.style.height = "auto";
    const height = el.offsetHeight;
    changeStyle();
    el.style.height = 0;
    requestAnimationFrame(() => {
      el.style.transition = ".5s";
      el.style.height = height + "px";
    });
  };
  const onAfterEnter = (el) => {
    el.style.transition = "none";
  };

  const clickHandler = () => {
    isShow.value = false;
  };

  return {
    computedStyle,
    isShow,
    onBeforeEnter,
    onEnter,
    onAfterEnter,
  };
};

// ContextMenu.vue
<script setup>
import { ref } from "vue";
import { useContextMenu } from "../hooks/useContextMenu";

const props = defineProps({
  modelValue: {
    type: String,
    default: "",
  },
  menuList: {
    type: Array,
    default: () => [],
  },
  options: {
    type: Object,
    default: () => ({}),
  },
});
const emit = defineEmits(["update:modelValue"]);
const wrapper = ref(null);
const menu = ref(null);
const { isShow, computedStyle, onBeforeEnter, onEnter, onAfterEnter } =
  useContextMenu(wrapper, menu, props.options);
const handleClick = (val) => {
  emit("update:modelValue", val);
};
</script>

<template>
  <div class="context-wrapper" ref="wrapper">
    <slot />
    <Teleport to="body">
      <Transition
        @before-enter="onBeforeEnter"
        @enter="onEnter"
        @after-enter="onAfterEnter"
      >
        <div
          v-show="isShow"
          class="context-list"
          :style="computedStyle"
          ref="menu"
        >
          <div
            class="item"
            v-for="(item, index) in menuList"
            :key="index"
            @click="handleClick(item)"
          >
            {{ item }}
          </div>
        </div>
      </Transition>
    </Teleport>
  </div>
</template>

<style scoped lang="less">
.context-wrapper {
  width: fit-content;
}
.context-list {
  position: fixed;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  background: #fff;
  .item {
    cursor: pointer;
    color: black;
    padding: 8px 12px;
    border-radius: 8px;
    &:hover {
      background: lightblue;
    }
  }
}
</style>

总结

封装右键菜单组件时，注意点如下

• 需要关注 fixed 定位的祖先确定规则，必要时使用 Teleport
• contextmenu 事件的特性，阻止冒泡，事件的触发机制，先捕获，再冒泡
• 高度动画如何实现，不可过渡到 auto，必须先获取具体的高度数值，然后利用 requestAnimationFrame 实现动画