FaContextMenu 右键菜单

通过实例 open({ x, y }) 在鼠标坐标打开菜单，支持图标、隐藏、禁用、菜单项回调和统一 click 事件。

右键菜单、图标、禁用与隐藏项

查看代码

Vue

<template>
	<div class="demo-context-target" @contextmenu="openMenu">在此区域单击鼠标右键</div>
	<FaContextMenu ref="menuRef" :data="data" />
</template>

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

interface ContextMenuExpose {
	open: (axis: { x: number; y: number }) => void;
}

const menuRef = useTemplateRef<ContextMenuExpose>("menuRef");
const data = [
	{
		name: "refresh",
		label: "刷新",
		icon: "el-icon-Refresh",
		click: () => {
			ElMessage.success("已刷新");
		},
	},
	{ name: "edit", label: "编辑", icon: "el-icon-Edit" },
	{ name: "locked", label: "禁用项", icon: "el-icon-Lock", disabled: true },
	{ name: "hidden", label: "隐藏项", hide: true },
];
const openMenu = (event: MouseEvent): void => {
	event.preventDefault();
	menuRef.value?.open({ x: event.clientX, y: event.clientY });
};
</script>

FaContextMenu 完整 API

Props 属性 (1)

属性	来源	说明	类型	默认值
data	Fast 新增	组件数据。	Array	[]

Events 事件（1）

名称	来源	说明	参数 / 类型
click	Fast 新增	点击时触发。	—

Slots 插槽（0）

名称	来源	说明	参数 / 类型
无。

Expose 暴露（3）

名称	来源	说明	参数 / 类型
visible	Fast 新增	弹层或右键菜单当前是否可见。	—
open({ x, y })	Fast 新增	执行 Fast 异步打开流程。	({ x, y })
close()	Fast 新增	执行 Fast 异步关闭流程。	()

FaContextMenu 实例方法

open 打开

打开菜单

签名

open(axis?: { x: number; y: number; }): void;

示例

<template>
	<FaContextMenu ref="componentRef" />
</template>

<script setup lang="ts">
import { ref } from "vue";
import { FaContextMenu } from "fast-element-plus";

const componentRef = ref<InstanceType<typeof FaContextMenu>>();
componentRef.value?.open({ x: 120, y: 80 });
</script>

输入

输入值	输入值类型	必填/默认值	输入值说明
axis	{ x: number; y: number; }	否	菜单相对视口的横向和纵向坐标；省略时使用 { x: 0, y: 0 }。

返回

返回值	返回值类型	返回值说明
result	void	没有返回值。

close 关闭

关闭菜单

签名

close(): void;

示例

<template>
	<FaContextMenu ref="componentRef" />
</template>

<script setup lang="ts">
import { ref } from "vue";
import { FaContextMenu } from "fast-element-plus";

const componentRef = ref<InstanceType<typeof FaContextMenu>>();
componentRef.value?.close();
</script>

输入

该方法没有输入参数。

返回

返回值	返回值类型	返回值说明
result	void	没有返回值。