ContextMenu 右键菜单 v.1.0.7+

快速的数据化配置一个右键菜单，用于交互逻辑较多的页面。

基础使用

使用 menus 配置一个菜单，contextMenu 事件需要禁用默认行为避免弹出默认菜单。

绑定icon 不仅支持图标名称，也可以支持常规的图片。

组件内置了可视区域的边缘处理，无需做额外的类似 x + menu.width > window.width 的计算。

点击查看代码

<template>
  <div>
    <div
      :class="['demo', { 'full-screen-demo': fullScreen }]"
      style="height: 150px"
      @contextmenu.prevent="onContextmenu($event)"
    >
      <p>此处使用右键触发菜单</p>
      <ElButton @click="fullScreen = !fullScreen">切换全屏</ElButton>
    </div>
    <AgelContextMenu
      v-model="contextMenu.show"
      :x="contextMenu.x"
      :y="contextMenu.y"
      :menus="contextMenu.data"
      @select="contextMenu.onSelect"
    />
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
const fullScreen = ref(false)
const contextMenu = reactive({
  show: false,
  x: 0,
  y: 0,
  data: [
    { title: '1-1 菜单', icon: 'Menu' },
    {
      title: '1-2 菜单',
      icon: 'Menu',
      divided: true
    },
    {
      title: '1-3 菜单',
      icon: 'https://element-plus.org/images/element-plus-logo.svg',
      children: [
        { title: '1-3-1 菜单', remark: 'Ctrl+A' },
        { title: '1-3-2 菜单', disabled: true },
        {
          title: '1-3-3 菜单',
          className: 'custom-red-menu-item'
        }
      ]
    }
  ],
  onSelect: (item: any) => {
    console.log(item)
    ElMessage.success('选中了' + item.title)
  }
})

function onContextmenu(e: MouseEvent) {
  contextMenu.show = true
  contextMenu.x = e.clientX
  contextMenu.y = e.clientY
  e.preventDefault()
}
</script>
<style>
.custom-red-menu-item {
  color: red !important;
}
.full-screen-demo {
  margin: 0px !important;
  width: 100vw !important;
  height: 100vh !important;
  position: fixed;
  top: 0;
  left: 0;
  background-color: var(--el-bg-color);
  z-index: 999;
}
</style>

属性

属性	类型	默认值	说明
modelValue	boolean	-	是否显示
x	number	-	菜单出现的 x 坐标
y	number	-	菜单出现的 y 坐标
menus	MenuItemProps[]	-	菜单配置
transition	string	'el-zoom-in-top'	过渡动画，transition 组件的 name 名称

MenuItemProps

属性	类型	默认值	说明
title	string	-	菜单名称，必须
icon	string	-	菜单图标或图片地址
remark	string	-	菜单备注
divided	boolean	-	菜单下划线
disabled	boolean	-	是否禁用
hidden	boolean	-	是否隐藏
className	string	-	Class 名称
children	MenuItemProps[]	-	下级菜单配置

事件

名称	参数	说明
select	MenuItemProps	菜单选项被点击时触发