使用Vue封装一个前端通用右键菜单组件

目录

• 为什么要做右键菜单
• 组件的设计
• 组件的布局方式
• 菜单组件的位置和可见度
• 组件动画
• 总结

<ContextMenu :relation="componentA"/>

<div class="componentA">
  <ContextMenu :porps=""/>
</div>

<!-- ContextMenu 组件使用 -->
<!-- const menu = [
  { label: '部门' },
  { label: '员工' },
  { label: '角色' },
  { label: '权限' },
  { label: '领导' }
] -->
<ContextMenu :menu="menu" @select="console.log($event)">
    <!-- 业务组件 -->
</ContextMenu>


<!-- ContextMenu -->
<div ref="container">
  <slot></slot>
  <ul class="context-menu">
    <li></li>
    <!-- 菜单组件实现 -->
  </ul>
</div>

<!-- ContextMenu -->
<div ref="container">
  <slot></slot>
  
  <Teleport to="body">
    <ul class="context-menu">
    <li></li>
    <!-- 菜单组件实现 -->
  </ul>
  </Teleport>
</div>

import { ref, onMounted, onUnmounted } from "vue";

export function useContextmenu(container) {
  const visible = ref(false);
  const x = ref(0);
  const y = ref(0);

  onMounted(() => {
    container.value.addEventListener("contextmenu", showMenu);
    // 把事件注册到捕获阶段，改变触发不同元素相同事件的触发顺序
    window.addEventListener("contextmenu", hideMenu, true);
    window.addEventListener("click", hideMenu);
  });

  onUnmounted(() => {
    container.value.removeEventListener("contextmenu", showMenu);
  });

  function showMenu(e) {
    e.preventDefault();
    e.stopPropagation();
    visible.value = true;

    nextTick(() => {
      const { clientX, clientY } = e;
      const menuContainer = document.querySelector(".context-menu");
      const { clientWidth: menuWidth, clientHeight: menuHeight } =
        menuContainer;
      const isOverPortWidth = clientX + menuWidth > window.innerWidth;
      const isOverPortHeight = clientY + menuHeight > window.innerHeight;

      if (isOverPortWidth) {
        x.value = clientX - menuWidth;
        y.value = clientY;
      }
      if (isOverPortHeight) {
        x.value = clientX;
        y.value = clientY - menuHeight;
      }
      if (!isOverPortHeight && !isOverPortWidth) {
        x.value = clientX;
        y.value = clientY;
      }
    });
  }

  function hideMenu(e) {
    visible.value = false;
  }
  return { visible, x, y };
}

function handleEnter(el) {
  // 手动计算auto下撑开的容器高度
  el.style.height = 'auto'
  // 这里需要减去多余的padding
  const h = el.clientHeight - 12
  // 高度回归为0 否则没有过渡效果
  el.style.height = 0 + 'px'

  // 渲染下一帧之前，复制过渡和计算出的高度
  requestAnimationFrame(() => {
    el.style.height = h + 'px'
    el.style.transition = '.3s'
  })
}

  // 进入动画结束后，关闭过渡，否则关闭菜单时有时延
  function handdleAfterEnter(el) {
    el.style.transition = 'none'
  }
</script>

<template>
  <div ref="container">
    
    <slot></slot>
    
    <Teleport to="body">
      <Transition @enter="handleEnter" @after-enter="handdleAfterEnter">
        <ul class="context-menu" >
          <li></li>
        </ul>
      </Transition>
    </Teleport>
  </div>
</template>