vue vxe-context-menu 如何給任意組件使用右鍵菜單，全局右鍵菜單，支持任意組件中直接調用右鍵菜單

打開右鍵菜單：VxeUI.contextMenu.open({ options })
事件觸發右鍵菜單：VxeUI.contextMenu.openByEvent(event, { options })
關閉右鍵菜單：VxeUI.contextMenu.close()

https://vxeui.com

任意組件調用右鍵菜單

通過方法調用即可，open 需要自己計算好座標，openByEvent 可以不用自己計算，支持在 click 或 context-menu 事件中使用

<template>
  <div>
    <vxe-button @contextmenu="showMenuEvent1">open 顯示</vxe-button>
    <vxe-button @contextmenu="showMenuEvent2">openByEvent 顯示</vxe-button>
  </div>
</template>

<script setup>
import { VxeUI } from 'vxe-pc-ui'

const showMenuEvent1 = ({ $event }) => {
  const x = $event.clientX
  const y = $event.clientY
  VxeUI.contextMenu.open({
    x,
    y,
    options: [
      [
        { code: '11', name: '新增' },
        { code: '22', name: '刪除' },
        {
          code: '33',
          name: '審批',
          children: [
            { code: '44', name: '通過' },
            { code: '55', name: '不通過' }
          ]
        },
        { code: '66', name: '查看' }
      ],
      [
        {
          code: '111',
          name: '更多操作',
          children: [
            { code: '113', name: '編輯' },
            { code: '114', name: '取消' }
          ]
        },
        { code: '110', name: '駁回' }
      ]
    ],
    events: {
      optionClick ({ option }) {
        VxeUI.modal.message({
          content: `點擊了 ${option.code}`,
          status: 'success'
        })
      }
    }
  })
}

const showMenuEvent2 = ({ $event }) => {
  VxeUI.contextMenu.openByEvent($event, {
    options: [
      [
        { code: '11', name: '新增' },
        { code: '22', name: '刪除' },
        {
          code: '33',
          name: '審批',
          children: [
            { code: '44', name: '通過' },
            { code: '55', name: '不通過' }
          ]
        },
        { code: '66', name: '查看' }
      ],
      [
        {
          code: '111',
          name: '更多操作',
          children: [
            { code: '113', name: '編輯' },
            { code: '114', name: '取消' }
          ]
        },
        { code: '110', name: '駁回' }
      ]
    ],
    events: {
      optionClick ({ option }) {
        VxeUI.modal.message({
          content: `點擊了 ${option.code}`,
          status: 'success'
        })
      }
    }
  })
}
</script>

樹組件使用右鍵菜單

<template>
  <div>
    <vxe-tree v-bind="treeOptions" v-on="treeEvents"></vxe-tree>
  </div>
</template>

<script setup>
import { reactive } from 'vue'
import { VxeUI } from 'vxe-pc-ui'

const treeOptions = reactive({
  transform: true,
  nodeConfig: {
    isHover: true,
    isCurrent: true
  },
  menuConfig: {
    options: [
      [
        { code: '1', name: '新增' },
        { code: '2', name: '刪除', prefixIcon: 'vxe-icon-delete-fill' },
        {
          code: '3',
          name: '審批',
          children: [
            { code: '4', name: '通過', prefixIcon: 'vxe-icon-check' },
            { code: '5', name: '不通過', prefixIcon: 'vxe-icon-close' }
          ]
        },
        { code: '6', name: '查看', prefixIcon: 'vxe-icon-link' }
      ],
      [
        {
          code: '11',
          name: '更多操作',
          children: [
            { code: '13', name: '編輯', prefixIcon: 'vxe-icon-feedback' },
            { code: '14', name: '取消' }
          ]
        },
        { code: '10', name: '駁回', prefixIcon: 'vxe-icon-undo' }
      ]
    ]
  },
  data: [
    { title: '節點2', id: '2', parentId: null },
    { title: '節點3', id: '3', parentId: null },
    { title: '節點3-1', id: '31', parentId: '3' },
    { title: '節點3-2', id: '32', parentId: '3' },
    { title: '節點3-2-1', id: '321', parentId: '32' },
    { title: '節點3-2-2', id: '322', parentId: '32' },
    { title: '節點3-3', id: '33', parentId: '3' },
    { title: '節點3-3-1', id: '331', parentId: '33' },
    { title: '節點3-3-2', id: '332', parentId: '33' },
    { title: '節點3-3-3', id: '333', parentId: '33' },
    { title: '節點3-4', id: '34', parentId: '3' },
    { title: '節點4', id: '4', parentId: null },
    { title: '節點4-1', id: '41', parentId: '4' },
    { title: '節點4-1-1', id: '411', parentId: '42' },
    { title: '節點4-1-2', id: '412', parentId: '42' },
    { title: '節點4-2', id: '42', parentId: '4' },
    { title: '節點4-3', id: '43', parentId: '4' },
    { title: '節點4-3-1', id: '431', parentId: '43' },
    { title: '節點4-3-2', id: '432', parentId: '43' },
    { title: '節點5', id: '5', parentId: null }
  ]
})

const treeEvents = {
  menuClick ({ node, option }) {
    VxeUI.modal.message({
      content: `點擊了${node.title} - code=${option.code}`,
      status: 'success'
    })
  }
}
</script>

https://gitee.com/x-extends/vxe-pc-ui