vue 3+TS 封装自定义右键全局菜单（虚拟节点）

有时我们需要点击（右键或左键）某个元素时弹出菜单，实现复制、粘贴、删除等功能。本文将介绍如何封装一个自定义的右键全局菜单（无三方依赖）。封装的菜单可自定义菜单项，图标，禁用，分割线，隐藏等。并且可以在全局任意地方使用。源码在文章末尾。

效果

使用

<template>
  <div>
    <div @click.right.native="showContextMenu($event, data)">
      右键点击我
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ContextMenuOptions, MenuItem } from '@/components/ContextMenu/types'

interface Data {
  name: string
  count: number
}

// data 无实际意义，只是为了展示菜单可以根据点击不同的数据显示不同的菜单项
const data: Data = {
  name: '张三',
  count: 1
}

const showContextMenu = (e: MouseEvent, data: Data) => {
  const items: MenuItem[] = [
    {
      label: `复制 ${data.name}`,
      icon: 'copy',
      onClick: () => {
        console.log(`已复制 ${data.name}`)
      }
    },
    {
      label: `test ${data.name}`,
      visible: data.count > 0,
      onClick: () => {
        console.log(`test ${data.name}`)
      }
    }
  ]
  const options: ContextMenuOptions = {
    items
  }
  proxy.$contextMenu(e, options)
}
</script>

实现

渲染用的是 vue 的 h (创建虚拟节点) 和 render (渲染虚拟节点) 函数。

这个全局菜单目前只是实现了基本功能，期待大家的 Issue 和 PR。

源码地址

大家可以根据自己的网络情况选择国内或国外的地址。

GitHub
Gitee