ContextMenu

右键菜单

基础用法

View Source

<script setup lang="ts">
import { ref } from 'vue'
import { ElMessage } from 'element-plus'

const data = [
  { label: 'test1', icon: 'ep:plus' },
  { label: 'test2', icon: 'ep:plus' },
  {
    label: 'test3',
    icon: 'ep:plus',
    children: [
      { label: 'test3-1', icon: 'ep:plus' },
      {
        label: 'test3-2',
        icon: 'ep:plus',
        children: [
          { label: 'test3-2-1', icon: 'ep:plus' },
        ],
      },
    ],
  },
]

const triggerRef = ref()

function onSelect(item: any) {
  ElMessage.success(`点击了${item.label}`)
}
</script>

<template>
  <el-button ref="triggerRef">
    点击右键触发
  </el-button>

  <ContextMenu :data="data" :trigger-ref="triggerRef" @select="onSelect" />
</template>

属性

名称	说明	类型	可选值	默认值
v-model	控制右键菜单的显示	boolean	-	-
x	右键菜单的定位	number | string	-	-
y	右键菜单的定位	number | string	-	-
data	菜单列表	ContextMenuItem	-	-
triggerRef	触发右键菜单的元素	HTMLElement	-	-

事件

事件名	说明	回调参数
select	选择菜单项时触发	当前点击的菜单项

类型定义

export interface ContextMenuItem {
  label?: string
  icon?: string
  children?: ContextMenuItem[]
  [x: string]: any
}

export interface ContextMenuProps {
  modelValue?: boolean
  data?: ContextMenuItem[]
  triggerRef?: HTMLElement
  x?: number | string
  y?: number | string
}

export type ContextMenuEmits = {
  select: [item: ContextMenuItem]
} & object