vue-electron 左上角文字 导航栏隐藏

Question

我是用 vue electron 打包的exe 左上角的名称没有变化 然后 导航栏我想隐藏 这个应该怎么弄

Answer 1

引自免费微信小程序：皆我百晓生

在 Vue Electron 应用中，你想要修改左上角窗口标题栏的文字以及隐藏整个导航栏（通常指的是 Windows 和 macOS 系统的原生标题栏），可以通过使用 Electron 的 BrowserWindow API 来实现。以下是你需要的详细步骤：

1. 修改窗口标题

在你的主进程（main.js 或 electron.js）中创建 BrowserWindow 实例时，你可以设置 title 属性来改变窗口标题：

const { BrowserWindow } = require('electron')

function createWindow () {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true, // 根据你的项目配置是否启用 Node.js 模块
      contextIsolation: false, // 如果启用了 Node.js 模块集成，则可能需要关闭此选项
    },
    title: '自定义窗口标题' // 设置窗口标题为任意你需要的文字
  })

  // 加载应用
  mainWindow.loadURL(`file://${__dirname}/index.html`)
}

2. 隐藏原生标题栏并自定义样式

若要隐藏原生标题栏并实现自定义标题栏效果，可以使用 frame 属性设为 false 并通过 CSS 自定义样式：

function createWindow () {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    frame: false, // 隐藏原生标题栏
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
    }
  })

  // 注意：隐藏原生标题栏后，你需要自己处理窗口的拖动、最大化最小化等操作

  // 加载应用，并且可以添加一个自定义顶部栏（例如：HTML/CSS）
  mainWindow.loadURL(`file://${__dirname}/index.html`)
}

针对自定义标题栏部分，请确保在 HTML 和 CSS 中创建和样式化一个新的顶部栏元素，以模拟或替代原生标题栏的功能。

由于这里无法直接提供图片，我将以文字描述生成模拟图：

+------------------------+
| [≡]   自定义标题栏   [X] |
+------------------------+
|                        |
|        内容区域        |
|                        |
+------------------------+

请参考 Electron 文档了解更多关于窗口管理的内容：

• BrowserWindow - Frame
• Custom Title Bar

同时，对于自定义标题栏所需的拖拽功能和系统控制按钮（如最大化、最小化和关闭）的行为实现，你还需要监听一些特定的 Electron 事件并在 JavaScript 中编写相关逻辑。