electron⾃定义标题栏_electron+vue制作桌⾯应⽤--⾃定义标
题栏
electron会默认显⽰边框和标题栏，如下图
我们来看⼀下如何⾃定义⼀个更加有(gao)意(da)思(shang)的标题栏，例如⽹易云⾳乐这种
⾸先我们要把默认的标题栏删掉，到主进程中创建窗体部分，new BrowserWindow时添加参数frame: false即可
mainWindow = new BrowserWindow({
useContentSize: true,
frame: false,electron vue教程
})
这样会把标题栏和边框⼀并隐藏
然后我们开始制作⾃⼰的标题栏
创建Mytitle组件‘\src\renderer\components\mytitle\Mytitle.vue‘
export default {
name: ‘Mytitle‘,
methods: {
}
}
#mytitle {
width: 100%;
height: 52px;
background-color: rgb(198, 47, 47);
-webkit-app-region: drag;
}
这⾥需要注意的是，去掉标题栏后，应⽤就没法拖动了，需要拖动的话需要拖动的区域需要设置css样式
-webkit-app-region: drag;
设置某⼀部分不可拖动为
-webkit-app-region: no-drag;
然后在App.vue中添加我们新建的组件
import Mytitle from ‘./components/mytitle/Mytitle‘;
export default {
name: ‘vue-electron-demo‘,
components: {
Mytitle
}
}
html,
body,
div {
margin: 0;
padding: 0;
}
这⾥需要对默认样式进⾏重置，不然标题栏与窗体会有边距，like this
现在⾃定义标题栏的基本雏形已经完成，剩下的就是基本的请⾃由发挥吧

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。