SvelteKit-Tauri应用自定义窗口标题栏失败求助

问题原因 #

你在脚本顶层直接调用document.getElementById时，组件DOM尚未渲染完成，会返回null，进而导致addEventListener调用失败。另外，Svelte提供了更适配框架特性的事件绑定方式，无需手动操作原生DOM。

修复代码 #

使用Svelte的事件指令替换原有DOM操作逻辑，彻底避免DOM渲染时机问题：

<script>
  import { appWindow } from '@tauri-apps/api/window';

  const minimizeWindow = () => appWindow.minimize();
  const toggleMaximizeWindow = () => appWindow.toggleMaximize();
  const closeWindow = () => appWindow.close();
</script>

<div data-tauri-drag-region class="titlebar">
    <div class="titlebar-button" on:click={minimizeWindow}>
        <img src="https://api.iconify.design/mdi:window-minimize.svg" alt="minimize" />
    </div>
    <div class="titlebar-button" on:click={toggleMaximizeWindow}>
        <img src="https://api.iconify.design/mdi:window-maximize.svg" alt="maximize" />
    </div>
    <div class="titlebar-button" on:click={closeWindow}>
        <img src="https://api.iconify.design/mdi:close.svg" alt="close" />
    </div>
</div>

<style>
    .titlebar {
        height: 30px;
        background: #329ea3;
        user-select: none;
        display: flex;
        justify-content: flex-end;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
    }
    .titlebar-button {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        width: 30px;
        height: 30px;
    }
    .titlebar-button:hover {
        background: #5bbec3;
    }
</style>

关键检查项 #

• 确认tauri.config.json中windows配置的decorations为false，这是自定义标题栏的必要前提。
• 确保已安装依赖：

  npm install @tauri-apps/api
  

• 若使用Tauri v2，需保证依赖版本与框架匹配，API路径无需修改。

内容的提问来源于stack exchange，提问作者Karan