Tauri 插件 Context Menu

一个用于在 Tauri v1.x 上显示原生上下文菜单的 Tauri 插件。Tauri API 默认不支持原生上下文菜单，因此创建了此插件以填补这一空白。

Tauri v2.x 已添加官方上下文菜单支持（见此处），因此此插件仅适用于 Tauri v1.x。

支持

安装

包： https://crates.io/crates/tauri-plugin-context-menu

cargo add tauri-plugin-context-menu 添加包。

或将以下内容添加到您的 Cargo.toml 以获取最新未发布版本（不推荐）。

tauri-plugin-context-menu = { git = "https://github.com/c2r0b/tauri-plugin-context-menu", branch = "main" }

参阅"使用插件" Tauri 官方指南以初始化插件。

此项目提供 TypeScript 工具以简化插件的用法。运行以下命令安装 JavaScript/TypeScript 包

 npm i tauri-plugin-context-menu

示例

检查 examples 目录以获取示例用法。

提供了一个纯 JavaScript 示例在 examples/vanilla。
在执行 npm install 后，要运行示例，请使用以下命令

npm run examples/vanilla

提供了一个使用实用程序包的 TypeScript 示例在 examples/ts-utility。您可以使用相同的命令运行它（将 examples/vanilla 替换为 examples/ts-utility）。

示例用法

无 JS/TS 包

import { invoke } from "@tauri-apps/api";
import { listen } from "@tauri-apps/api/event";
import { resolveResource } from "@tauri-apps/api/path";

// Listen to the event emitted when the first menu item is clicked
listen("item1clicked", (event) => {
    alert(event.payload);
});

window.addEventListener("contextmenu", async (e) => {
    e.preventDefault();
    const iconUrl = await resolveResource('assets/16x16.png');

    // Show the context menu
    invoke("plugin:context_menu|show_context_menu", {
        items: [
            {
                label: "Item 1",
                disabled: false,
                event: "item1clicked",
                payload: "Hello World!",
                shortcut: "ctrl+M",
                icon: {
                    path: iconUrl
                },
                subitems: [
                    {
                        label: "Subitem 1",
                        disabled: true,
                        event: "subitem1clicked",
                    },
                    {
                        is_separator: true,
                    },
                    {
                        label: "Subitem 2",
                        disabled: false,
                        checked: true,
                        event: "subitem2clicked",
                    }
                ]
            }
        ],
    });
});

带 JS/TS 包

import { showMenu } from "tauri-plugin-context-menu";

showMenu({ 
    pos: {...}, // Position of the menu (see below for options)
    theme: "light", // Theme of the menu
    items: [
        ...,
        {
            ..., // Menu item (see below for options)
            event: () => {
                // Do something
            }
        }
    ]
});

您还可以使用它通过 onEventShowMenu 函数响应用户事件

import { onEventShowMenu } from "tauri-plugin-context-menu";
onEventShowMenu("contextmenu", (e) => ({ /* menuOptions */ }));

选项

可以传递给插件的选项列表。

菜单项

MenuItemIcon

位置

当 is_absolute 设置为 false 时，位置坐标必须相对于当前活动的窗口。

修改键

修改键可以用于菜单项的 shortcut 选项，以显示相应的符号（⌘、⌃、⌥、⇧）。

在 MacOS 上，这也使得在按下修改键时快捷键可以工作（因为默认由操作系统处理）。

事件

项点击

当菜单项被点击时触发。事件名称与菜单项的 event 选项相同

import { listen } from "@tauri-apps/api/event";
import { invoke } from "@tauri-apps/api";

listen("[EVENTNAME]", () => {
    alert("menu item clicked");
});

invoke(...{
    items: [{
        ...
        event: "[EVENTNAME]",
        ...
    }]
});

菜单关闭

当菜单关闭时触发。无论菜单是通过点击菜单项还是通过点击菜单外部关闭，都会触发此事件。
您可以使用以下代码捕获此事件

import { listen } from "@tauri-apps/api/event";

listen("menu-did-close", () => {
    alert("menu closed");
});