electron会默认显示边框和标题栏,如下图
我们来看一下如何自定义一个更加有(gao)意(da)思(shang)的标题栏,例如网易云音乐这种
首先我们要把默认的标题栏删掉,找到主进程中创建窗体部分,new BrowserWindow时添加参数frame: false即可
mainWindow = new BrowserWindow({
useContentSize: true,
frame: false,
})
这样会把标题栏和边框一并隐藏
然后我们开始制作自己的标题栏
创建Mytitle组件‘\src\renderer\components\mytitle\Mytitle.vue‘
<template>
<div id="mytitle">
</div>
</template>
<script>
export default {
name: ‘Mytitle‘,
methods: {
}
}
</script>
<style>
#mytitle {
width: 100%;
height: 52px;
background-color: rgb(198, 47, 47);
-webkit-app-region: drag;
}
</style>
这里需要注意的是,去掉标题栏后,应用就没法拖动了,需要拖动的话需要拖动的区域需要设置css样式
-webkit-app-region: drag;
设置某一部分不可拖动为
-webkit-app-region: no-drag;
然后在App.vue中添加我们新建的组件
<template>
<div id="app">
<!-- <router-view></router-view> -->
<Mytitle />
</div>
</template>
<script>
import Mytitle from ‘./components/mytitle/Mytitle‘;
export default {
name: ‘vue-electron-demo‘,
components: {
Mytitle
}
}
</script>
<style>
html,
body,
div {
margin: 0;
padding: 0;
}
</style>
这里需要对默认样式进行重置,不然标题栏与窗体会有边距,like this
现在自定义标题栏的基本雏形已经完成,剩下的就是基本的请自由发挥吧
下一篇:electron+vue制作桌面应用--自定义标题栏最大/小化和关闭
原文地址:https://www.cnblogs.com/baimeishaoxia/p/12200852.html
时间: 2024-10-21 08:36:10