晋城市网站建设_网站建设公司_MongoDB_seo优化

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 @click="showMenuEvent1">open 显示</vxe-button><vxe-button @click="showMenuEvent2">openByEvent 显示</vxe-button></div>
</template><script setup>
import { VxeUI } from 'vxe-pc-ui'const showMenuEvent1 = ({ $event }) => {const x = $event.clientXconst y = $event.clientYVxeUI.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