Tauri macOS 应用中 prompt() 不显示的解决方案-js教程-PHP中文网

Tauri macOS 应用中 prompt() 不显示的解决方案

在 Tauri 桌面应用中，window.prompt() 在 macOS 上默认不触发（Windows 和网页环境正常），这是由于 Tauri 未实现原生 prompt 对话框所致；推荐使用 @tauri-apps/api/dialog 提供的 ask 或自定义模态框替代，并通过 Promise 配合 async/await 实现非阻塞交互。

在 tauri 桌面应用中，`window.prompt()` 在 macos 上默认不触发（windows 和网页环境正常），这是由于 tauri 未实现原生 `prompt` 对话框所致；推荐使用 `@tauri-apps/api/dialog` 提供的 `ask` 或自定义模态框替代，并通过 promise 配合 `async/await` 实现非阻塞交互。

Tauri 基于 WebView2（Windows）和 WebKit（macOS），但出于安全与用户体验考虑，其 macOS WebView 默认禁用或忽略 window.prompt() 的原生调用——这与浏览器行为不同，也不同于 Windows 上的兼容性表现。官方 API 中，@tauri-apps/api/dialog 已提供 alert() 和 confirm() 的跨平台封装，但截至当前版本（v2.x），prompt() 尚未实现（GitHub Issue #4783 明确标记为待支持）。

✅ 推荐方案：使用 dialog.ask() 构建类 prompt 行为
虽然 ask() 本身仅返回布尔值（类似 confirm），但可通过组合 dialog.open() + 自定义 HTML 模态框实现更贴近 prompt 的体验。更轻量、推荐的做法是使用 dialog.ask() 的扩展变体 —— 实际上，Tauri 官方已提供 dialog.prompt() 的实验性支持（自 @tauri-apps/api@2.0.0-rc.0 起），但需手动启用并注意平台兼容性。不过，稳定且推荐的方式仍是自行封装一个 Promise-based 输入对话框：

// src/lib/prompt.ts
import { open } from '@tauri-apps/api/dialog';

export async function tauriPrompt(
  message: string = '请输入内容',
  title: string = '输入提示'
): Promise<string null> {
  const result = await open({
    title,
    filters: [],
    multiple: false,
    directory: false,
    defaultPath: '',
    // 注意：open() 本身不支持文本输入，因此此处仅作示意；
    // 真实场景应使用自定义 Svelte 组件（见下文）
  });
  // ⚠️ 此处 open() 并非真正 prompt 替代 —— 更佳实践如下：
}</string>

✅ 最佳实践：Svelte 自定义 Prompt 组件（推荐）
在 Svelte 中创建可复用的，配合 createEventDispatcher 或 store 控制显隐与数据流：

<!-- src/lib/PromptDialog.svelte -->
<script lang="ts">
  import { createEventDispatcher } from 'svelte';
  const dispatch = createEventDispatcher();
  export let message = '请输入名称';
  export let title = '重命名';
  let input = '';

  function confirm() {
    dispatch('submit', input || null);
  }
  function cancel() {
    dispatch('submit', null);
  }
</script>

{#if true}
  <div class="overlay" on:click>
    <div class="dialog" on:click>
      <h3>{title}</h3>
      <p>{message}</p>
      <input bind:value="{input}" autofocus><div class="buttons">
        <button on:click="{cancel}">取消</button>
        <button on:click="{confirm}">确定</button>
      </div>
    </div>
  </div>
{/if}

<style>
  .overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 1000; }
  .dialog { background: white; padding: 1rem; border-radius: 8px; width: 90%; max-width: 400px; }
  input { width: 100%; padding: 0.5rem; margin: 0.5rem 0; border: 1px solid #ccc; border-radius: 4px; }
  .buttons { text-align: right; }
</style>

在业务逻辑中调用：

macOS Automator Services

部署和使用军舰的 macOS Automator 自动化服务集合。包含 5 个实用工作流：PDF转JPG、PNG重命名并转JPG、图像拼接、解压RAR、顺序命名图像文件。一键安装所有服务到 ~/Library/Services/ 目录。使用场景：(1) "安装我的自动化服务"，(2) "部署所有 Automato...

下载

<!-- 在你的组件中 -->
<script lang="ts">
  import PromptDialog from '$lib/PromptDialog.svelte';
  import { writable } from 'svelte/store';

  const showPrompt = writable(false);
  const promptResult = writable<string | null>(null);

  async function handleRename() {
    showPrompt.set(true);
    const name = await new Promise<string | null>((resolve) => {
      const unsub = promptResult.subscribe((val) => {
        if (val !== undefined) {
          resolve(val);
          unsub();
          showPrompt.set(false);
        }
      });
    });
    if (name) {
      console.log('新名称:', name);
      // 执行重命名逻辑...
    }
  }
</script><button on:click="{handleRename}">重命名</button>

{#if $showPrompt}
  <promptdialog message="请输入新文件名" title="重命名文件" on:submit="{(e)"> promptResult.set(e.detail)}
  />
{/if}</promptdialog>

? 注意事项：