electron+vue制作桌面应用--自定义标题栏

韩冰发布于2019-08-01 17:52 / 786人阅读

摘要：会默认显示边框和标题栏，如下图我们来看一下如何自定义一个更加有意思的标题栏，例如网易云音乐这种首先我们要把默认的标题栏删掉，找到主进程中创建窗体部分，时添加参数即可这样会把标题栏和边框一并隐藏然后我们开始制作自己的标题栏创建组件这里

electron会默认显示边框和标题栏，如下图

我们来看一下如何自定义一个更加有(gao)意(da)思(shang)的标题栏，例如网易云音乐这种

首先我们要把默认的标题栏删掉，找到主进程中创建窗体部分，new BrowserWindow时添加参数frame: false即可

mainWindow = new BrowserWindow({
    useContentSize: true,
    frame: false,
  })

这样会把标题栏和边框一并隐藏

然后我们开始制作自己的标题栏
创建Mytitle组件"src enderercomponentsmytitleMytitle.vue"

这里需要注意的是，去掉标题栏后，应用就没法拖动了，需要拖动的话需要拖动的区域需要设置css样式

-webkit-app-region: drag;

设置某一部分不可拖动为

-webkit-app-region: no-drag;

然后在App.vue中添加我们新建的组件

这里需要对默认样式进行重置，不然标题栏与窗体会有边距，like this

现在自定义标题栏的基本雏形已经完成，剩下的就是基本的请自由发挥吧

下一篇：electron+vue制作桌面应用--自定义标题栏最大/小化和关闭

GPU云服务器云服务器自定义标题自定义镜像制作 webrtc结合electron桌面分享标题栏

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/51432.html

electron+vue制作桌面应用--自定义标题栏

摘要：会默认显示边框和标题栏，如下图我们来看一下如何自定义一个更加有意思的标题栏，例如网易云音乐这种首先我们要把默认的标题栏删掉，找到主进程中创建窗体部分，时添加参数即可这样会把标题栏和边框一并隐藏然后我们开始制作自己的标题栏创建组件这里 electron会默认显示边框和标题栏，如下图 showImg(https://segmentfault.com/img/bVXwA5?w=412&h=6...

roundstones 2019-08-30 13:50 评论0 收藏0
electron+vue制作桌面应用--自定义标题栏

摘要：会默认显示边框和标题栏，如下图我们来看一下如何自定义一个更加有意思的标题栏，例如网易云音乐这种首先我们要把默认的标题栏删掉，找到主进程中创建窗体部分，时添加参数即可这样会把标题栏和边框一并隐藏然后我们开始制作自己的标题栏创建组件这里 electron会默认显示边框和标题栏，如下图 showImg(https://segmentfault.com/img/bVXwA5?w=412&h=6...

用户83 2019-08-21 17:18 评论0 收藏0
electron+vue制作桌面应用--自定义标题栏最大/小化和关闭

摘要：上一篇制作桌面应用自定义标题栏中我们介绍了如何使用制作自定义样式的标题栏接下来，我们介绍一下标题栏上的最大化最小化和关闭按钮如何实现首先查阅文档部分，我们发现已经准备好和三个方法供我们调用了。上一篇：electron+vue制作桌面应用--自定义标题栏中我们介绍了如何使用electon制作自定义样式的标题栏接下来，我们介绍一下标题栏上的最大化、最小化和关闭按钮如何实现首先查阅ele...

dinfer 2019-08-30 13:50 评论0 收藏0
electron+vue制作桌面应用--自定义标题栏最大/小化和关闭

摘要：上一篇制作桌面应用自定义标题栏中我们介绍了如何使用制作自定义样式的标题栏接下来，我们介绍一下标题栏上的最大化最小化和关闭按钮如何实现首先查阅文档部分，我们发现已经准备好和三个方法供我们调用了。上一篇：electron+vue制作桌面应用--自定义标题栏中我们介绍了如何使用electon制作自定义样式的标题栏接下来，我们介绍一下标题栏上的最大化、最小化和关闭按钮如何实现首先查阅ele...

liukai90 2019-08-21 17:18 评论0 收藏0