Vue3 第三十一篇：常用组件：右键菜单

JSX:

import { reactive } from "vue";
import style from "./home.module.css";

let { rightShow, rightStyle } = reactive({
  // 右键菜单是否正在显示
  rightShow: false,
  // 右键菜单样式：用来控制菜单展示的位置和盒子大小
  rightStyle: {
    left: "0px", // 坐标x
    top: "0px", // 坐标y
    maxHeight: "0px", // 右键菜单的最高高度 (控制是否展开)
  },
});

// 主视图：右键菜单
const RightClickMenu = () => {
  //右键打开菜单
  const rightShowMenu = (event) => {
    // 阻止原生右键菜单
    event.preventDefault();
    rightStyle.left = event.clientX + "px";
    rightStyle.top = event.clientY + "px";
    rightStyle.maxHeight = "200px";
    rightShow = true;
  };

  // 关闭右键菜单 - 立即关闭
  const rightCloseMenu = () => {
    rightStyle.maxHeight = "0px";
    rightShow = false;
  };

  // 关闭右键菜单 - 带动画折叠关闭 (失去焦点和点击取消时调用, 为什么不全部调用这个? 因为其它时候调用这个都太卡了)
  const rightCloseMenu2 = () => {
    rightStyle.maxHeight = "0px";
  };

  // 右键 刷新
  const rightF5 = () => {};

  // 右键 复制
  const rightCopy = () => {};

  // 右键 关闭
  const rightClose = () => {};

  // 右键 关闭其他
  const rightCloseOther = () => {};

  // 右键 关闭所有
  const rightCloseAll = () => {};

  // 右键 悬浮
  const rightXf = () => {};

  // 右键 全屏
  const rightFull = () => {};

  // 右键 - 新窗口打开
  const rightWindowOpen = () => {};
  return(
    <>
      {/* 测试区域 */}
      <div style={{backgroundColor:'blue',width:'300px',height:'300px'}} onContextmenu={rightShowMenu}></div>

      <div className={style.rightBox} style={rightStyle} v-show={rightShow} tabindex="-1" onBlur={rightCloseMenu2}>
        <div className={style.rightBox2}>
          <div onClick={[rightCloseMenu, rightF5]}><el-icon><CaretRight /></el-icon>刷新</div>
          <div onClick={[rightCloseMenu, rightCopy]}><el-icon><CaretRight /></el-icon>复制</div>
          <div onClick={[rightCloseMenu, rightClose]}><el-icon><CaretRight /></el-icon>关闭</div>
          <div onClick={[rightCloseMenu, rightCloseOther]}><el-icon><CaretRight /></el-icon>关闭其它</div>
          <div onClick={[rightCloseMenu, rightCloseAll]}><el-icon><CaretRight /></el-icon>关闭所有</div>
          <div onClick={[rightCloseMenu, rightXf]}><el-icon><CaretRight /></el-icon>悬浮打开</div>
          <div onClick={[rightCloseMenu, rightFull]}><el-icon><CaretRight /></el-icon>全屏打开</div>
          <div onClick={[rightCloseMenu, rightWindowOpen]}><el-icon><CaretRight /></el-icon>新窗口打开</div>
          <div onClick={[rightCloseMenu2]}><el-icon><CaretRight /></el-icon>取消</div>
        </div>
      </div>
    </>
)
};

export default RightClickMenu;

CSS:

/* 右键菜单 样式 */
.rightBox {
  position: fixed;
  z-index: 2147483647;
  transition: max-height 0.2s;
  outline: none;
  max-height: 0px;
  overflow: hidden;
  box-shadow: 3px 3px 3px #666;
}

.rightBox2 {
  font-size: 0.8em;
  padding: 0.5em 0;
  border: 1px #aaa solid;
  border-radius: 1px;
  background-color: #fff;
}
.rightBox2 > div {
  line-height: 2.2em;
  padding-left: 0.7em;
  padding-right: 1.8em;
  cursor: pointer;
  white-space: nowrap;
}
.rightBox2 > div:hover {
  background-color: #ddd;
  color: #2d8cf0;
}
.rightBox2 > div i {
  margin-right: 8px;
}