FaContextMenu

Call the exposed open({ x, y }) method to open the menu at pointer coordinates. Items support icons, visibility, disabled state, callbacks and a shared click event.

Context Menu

View code

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 Complete API

Props (1)

Property	Source	Description	Type	Default
data	Fast addition	Component data.	Array	[]

Events（1）

Name	Source	Description	Parameters / type
click	Fast addition	Click event.	—

Slots（0）

Name	Source	Description	Parameters / type
None.

Expose（3）

Name	Source	Description	Parameters / type
visible	Fast addition	Current overlay/context-menu visibility.	—
open({ x, y })	Fast addition	Runs the Fast asynchronous opening flow.	({ x, y })
close()	Fast addition	Runs the Fast asynchronous closing flow.	()

FaContextMenu instance methods

open Open

Opens the menu.

Signature

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

Example

<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>

Input

Input	Type	Required / default	Description
axis	{ x: number; y: number; }	Optional	Viewport-relative x/y coordinates; defaults to { x: 0, y: 0 }.

Returns

Value	Type	Description
result	void	No return value.

close Close

Closes the menu.

Signature

close(): void;

Example

<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>

Input

This method has no input parameters.

Returns

Value	Type	Description
result	void	No return value.