Contextmenu 右键菜单

右键弹出菜单。函数式组件，无需要在 template 中定义。

关联组件

• ElMenu
• ElSubMenu
• ElMenuItem
• ElIcon
• ElDivider

基础用法

类型

ElContextmenu(option: ContextmenuOption): {
  close: () => void;
}

使用示例

<script setup lang="ts">
import { ElContextmenu } from 'element-plus-ext'

function showMenu(event: MouseEvent) {
  ElContextmenu({
    event,
    menus: [
      {
        index: 'open-file',
        label: '打开文件',
        onClick: () => {
          console.log('点击了 打开文件 菜单')
        }
      }
    ]
  })
}
</script>

<template>
  <div @contextmenu="showMenu"></div>
</template>

API

ContextmenuOption

属性名	说明	类型	默认值
event (必填)	鼠标事件对象	MouseEvent	-
menus (必填)	菜单列表	ContextmenuItem[]	-
reserveIconWidth	是否预留出左侧icon的位置，即使没有设置icon。如果设置了false，但是给菜单设置了icon，这个选项无效。	boolean	true

ContextmenuItem

属性名	说明	类型	默认值
index (必填)	菜单的唯一标识	string	-
label (必填)	菜单的名称	string	-
icon	菜单的图标	Component	-
disabled	是否禁用	boolean	false
children	子菜单项	ContextmenuItem[]	-
divided	是否向下显示一个分割线	boolean	false
onClick	点击菜单项时触发的回调函数	Function	() => void