自定义的 标题栏 electron-vue
时间: 2023-10-01 14:04:57 浏览: 150
自定义标题栏
在使用 Electron-Vue 构建应用程序时,可以自定义应用程序窗口的标题栏。以下是一些步骤:
1. 在 `main.js` 文件中,找到 `createWindow` 函数,并将 `frame: false` 改为 `frame: true`。这将启用原生窗口边框。
2. 在 `App.vue` 文件中,添加以下代码:
```
<template>
<div class="app">
<div class="titlebar">
<div class="title">{{ title }}</div>
<div class="buttons">
<div class="minimize" @click="minimizeWindow"></div>
<div class="maximize" @click="toggleMaximize"></div>
<div class="close" @click="closeWindow"></div>
</div>
</div>
<router-view/>
</div>
</template>
<script>
export default {
data() {
return {
title: 'My App'
}
},
methods: {
minimizeWindow() {
this.$store.dispatch('minimizeWindow')
},
toggleMaximize() {
this.$store.dispatch('toggleMaximize')
},
closeWindow() {
this.$store.dispatch('closeWindow')
}
}
}
</script>
<style scoped>
.titlebar {
-webkit-app-region: drag;
height: 30px;
background-color: #333;
color: #fff;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 10px;
}
.title {
font-size: 14px;
font-weight: bold;
}
.buttons {
display: flex;
}
.minimize,
.maximize,
.close {
width: 12px;
height: 12px;
margin-left: 5px;
background-repeat: no-repeat;
background-position: center;
-webkit-app-region: no-drag;
}
.minimize {
background-image: url(./assets/img/minimize.png);
}
.maximize {
background-image: url(./assets/img/maximize.png);
}
.close {
background-image: url(./assets/img/close.png);
}
</style>
```
3. 在 `store.js` 文件中,添加以下代码:
```
const state = {
window: null,
isMaximized: false
}
const mutations = {
SET_WINDOW(state, window) {
state.window = window
},
SET_IS_MAXIMIZED(state, isMaximized) {
state.isMaximized = isMaximized
}
}
const actions = {
createWindow({ commit }) {
const win = new BrowserWindow({
width: 800,
height: 600,
show: false,
frame: false,
webPreferences: {
nodeIntegration: true
}
})
win.on('closed', () => {
app.quit()
})
commit('SET_WINDOW', win)
},
minimizeWindow({ state }) {
state.window.minimize()
},
toggleMaximize({ state, commit }) {
if (state.isMaximized) {
state.window.unmaximize()
commit('SET_IS_MAXIMIZED', false)
} else {
state.window.maximize()
commit('SET_IS_MAXIMIZED', true)
}
},
closeWindow({ state }) {
state.window.close()
}
}
```
4. 在 `index.html` 文件中,添加以下代码:
```
<head>
...
<style>
.app {
-webkit-app-region: no-drag;
}
</style>
</head>
```
5. 在 `static/img` 文件夹中添加 `minimize.png`、`maximize.png` 和 `close.png` 图片。
现在,您可以自定义标题栏样式并添加标题栏按钮。
阅读全文