React 自定义右键菜单

实现步骤

• 给window绑定contextmenu方法展示自定义菜单
• 阻止浏览器本身的右键菜单

import React, { useMemo } from "react";
import { useHistory, useModel } from "umi";
import styles from "./index.module.less";

const RightMenu = () => {
  const { qbb } = useModel("qbb");
  const history = useHistory();
  return useMemo(
    () => (
      <div
        className={styles.Menu}
        style={{
          top: qbb.top,
          left: qbb.left,
          display: qbb.menu ? "block" : "none",
        }}>
        <div className={styles.MenuContent}>
          <div className={styles.MenuItem} onClick={() => history.push("/")}>
            返回首页
          </div>
          <div className={styles.MenuItem} onClick={() => history.go(0)}>
            刷新
          </div>
        </div>
      </div>
    ),
    [qbb.top, qbb.left, qbb.menu]
  );
};

export default RightMenu;

css

.Menu {
  position: fixed;
  z-index: 9999;
  width: 200px;
  min-height: 300px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24),
    0 0 10px rgba(128, 128, 128, 0.63);
  .MenuContent {
    padding: 4px 0;
  }
  .MenuItem {
    padding: 8px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s;
    &:hover {
      background-color: gray;
      color: #fff;
    }
  }
}

入口文件

import React, { useEffect } from "react";
import { useModel } from "umi";
import RightMenu from "@/components/RightMenu";

const Index = ({ children }) => {
  const { setQbb } = useModel("qbb");
  useEffect(() => {
    window.addEventListener("click", () => setQbb({ menu: false }));
    window.addEventListener("contextmenu", (e) => {
      setQbb({ top: e.clientY, left: e.clientX, menu: true });
      e.preventDefault();
    });
  }, []);
  return (
    <>
      {children} <RightMenu />
    </>
  );
};

export default Index;