vue vxe-context-menu 如何给任意组件使用右键菜单，全局右键菜单

vue vxe-context-menu 如何给任意组件使用右键菜单，全局右键菜单，支持任意组件中直接调用右键菜单

打开右键菜单：VxeUI.contextMenu.open({ options })

事件触发右键菜单：VxeUI.contextMenu.openByEvent(event, { options })

关闭右键菜单：VxeUI.contextMenu.close()

https://vxeui.com

任意组件调用右键菜单

通过方法调用即可，open 需要自己计算好坐标，openByEvent 可以不用自己计算，支持在 click 或 context-menu 事件中使用

html 复制代码

<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>

树组件使用右键菜单

html 复制代码

<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