Vue3 创建右键菜单

37 min read

在 Vue 3 中使用 @vueuse/context-menu：

  1. 安装库：
npm install @vueuse/core @vueuse/context-menu

或者使用yarn：

yarn add @vueuse/core @vueuse/context-menu
  1. 在你的组件中导入和使用它：
<template>
  <div>
    <div :ref="refElement">Right click me</div>
    <ContextMenu v-if="showContextMenu" :position="position" @close="showContextMenu = false">
      <li @click="handleClick('option 1')">Option 1</li>
      <li @click="handleClick('option 2')">Option 2</li>
    </ContextMenu>
  </div>
</template>

<script>
import { ref, reactive } from 'vue'
import { useClickAway, useContextMenu } from '@vueuse/core'
import ContextMenu from '@vueuse/context-menu'

export default {
  components: {
    ContextMenu
  },
  setup() {
    const refElement = ref(null)
    const position = reactive({ x: 0, y: 0 })
    const showContextMenu = ref(false)

    useContextMenu(refElement, (event) => {
      event.preventDefault()
      position.x = event.x
      position.y = event.y
      showContextMenu.value = true
    })

    useClickAway(refElement, () => {
      showContextMenu.value = false
    })

    const handleClick = (option) => {
      console.log(option)
      showContextMenu.value = false
    }

    return {
      refElement,
      position,
      showContextMenu,
      handleClick
    }
  }
}
</script>

这里，我们创建一个新的 div 元素，当你在这个元素上右键点击时，会出现一个上下文菜单。当你点击其他地方时，上下文菜单会消失。如果你点击菜单项，将在控制台打印菜单项名称，并关闭上下文菜单。