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

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

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

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

mainWindow = new BrowserWindow({

useContentSize: true,

frame: false,

})

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

然后我们开始制作自己的标题栏

创建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

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

electron 自定义标题栏_electron+vue制作桌面应用--自定义标题栏相关推荐

electron vue点击按钮关闭_electron+vue制做桌面应用--自定义标题栏最大/小化和关闭...
上一篇:electron+vue制做桌面应用--自定义标题栏中咱们介绍了如何使用electon制做自定义样式的标题栏接下来,咱们介绍一下标题栏上的最大化.最小化和关闭按钮如何实现vue 首先查阅el ...
php源码自定义字段,wordpress主题制作：设置自定义选项字段
在主题制作时,有时需要将一些文字和样式提出来,做成一个选项给用户设置. customize_register这个可以帮到你定义一个可编辑内容,并且可以设置颜色.代码如下,必须在functions.p ...
【项目精选】基于Electron + Vue的桌面音乐助手的设计与实现
1. 使用技术 JavaScript框架 Electron和Vue框架如果想开发一个桌面 GUI 应用软件,希望其能同时在 Windows.Linux 和 Mac 平台上运行,可选的技术框架并不多, ...
electron 图标制作_使用Electron和Microsoft Bot Framework制作Skype Bot
electron 图标制作聊天机器人越来越受欢迎. Facebook正在致力于提供一个构建Messenger机器人的框架,该框架将允许企业所有者完全在Facebook的消息传递应用程序内部建立其客户 ...
学习使用React和Electron一次构建自己的桌面聊天应用程序
by Alex Booker 通过亚历克斯布克学习使用React和Electron一次构建自己的桌面聊天应用程序 (Learn to build your own desktop chat app ...
VSCode使用记录一：ubuntu 16.04下安装、编译文件、制作桌面图标和卸载
目录一.概述二.下载安装 2.1 安装VSCode 2.2 安装插件 2.3 打开文件夹三.配置文件进行编译 3.1 配置launch.json文件 3.2 配置tasks.json文件使用m ...
预告：关于php制作桌面软件的方案与未来规划
未来的环境体积超小,全部的一切支持自定义,服务可以让你感觉在0秒的瞬间,网站服务就启动了! 此技术打算应用在未来的php软件,用php直接快速制作桌面软件,看起来和传统软件并无二致,基本看不出配合我 ...
前端Vue制作日历插件FullCalendar
前端Vue制作日历插件FullCalendar 官方文档:https://fullcalendar.io/ 效果图安装 Vue2:npm install --save @fullcalendar/v ...
Vue 3 桌面应用开发（文末附视频）
在正式开始之前,我想先直接"输出"一些背景信息,既能阐明我的观点,也希望可以坚定你学习本小册的决心. 首先,桌面应用开发在未来一定会大放异彩,桌面应用相对于移动应用来说优势非常明显 ...
使用Vue构建桌面应用程序：Vuido
我非常喜欢Vue.这是个优秀的框架,可以帮助我们搭建完美的web应用程序.但真正神奇的地方是你不仅仅可以用它搭建web应用程序,还可以使用Weex或NativeScript-Vue创建本地移动应用程序 ...

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

electron 自定义标题栏_electron+vue制作桌面应用--自定义标题栏相关推荐

最新文章

热门文章