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

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

electron+vue制作桌面应用--自定义标题栏的相关文章

手把手教Electron+vue的使用

.现如今前端框架数不胜数,尤其是angular.vue吸引一大批前端开发者,在这个高新技术快速崛起的时代,自然少不了各种框架的结合使用.接下来是介绍electron+vue的结合使用. 2.Electron是什么?? 对于我来说Electron相当于一个浏览器的外壳,可以把网页程序嵌入到壳里面,可以运行在桌面上的一个程序,可以把网页打包成一个在桌面运行的程序,通俗来说就是软件,比如像QQ.优酷.网易音乐等等.功能的强大超出你的想象,可以构建跨平台桌面程序,本身支持node.js,可以使用node

android 自定义标题栏

今天来看一下如何通过组合多个控件实现自定义标题栏 众所周知,标题栏是应用中必不可少的控件,为了避免多次重写,将其封装起来,供每个布局调用即可. 这里我们采用经典的左中右布局,也可以根据项目需要自行调整,比如在右侧再加一个控件,或者将标题偏左都可以 注:其中应用到了上一篇文章中的ButtonM控件,大家可以先简单了解一下. 还是先来看一下效果图:    图一 初始状态                                         图二 按下了右侧的搜索按钮 下面来看代码实现,共四

WPF 自定义标题栏

自定义标题栏效果如上,代码示例 <Grid> <Grid.Resources> <Style TargetType="RadioButton"> <Setter Property="Margin" Value="0.5,2"></Setter> <Setter Property="Template"> <Setter.Value> <Co

【Win 10开发】自定义标题栏

UWP 现在已经可以自定义标题栏了,毕竟看灰色时间长了也会厌烦,开发者们还是希望能够将自己的UI做的更加漂亮,更加与众不同.那么废话不多说,我们开始吧! 首先要了解ApplicationViewTitleBar这个类.其中提供了以下属性: MSDN参考地址:ApplicationViewTitleBar class 首先,我们写一个TitleBarChanged方法,在里面先获取到当前窗口的实例. 1 ApplicationView view = ApplicationView.GetForCu

安卓学习随笔 -- 自定义标题栏

在安卓中不喜欢系统默认的标题栏,那么如何让自定义一个自己的标题栏呢. 自定义后的标题栏如下: 首先这里需要定义一个自定义的标题栏布局 title.xml文件 (里边需要两个图片这个很简单) <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="horizontal" android:layout_width="fi

android自定义标题栏,背景颜色填充满

设置标题栏背景 1> 准备背景图片: background_pix.png 注:用背景图片比用颜色好处,可以让背景看起来有凹凸感. 2> drawable文件夹下放xml文件 bitmap_repeat.xml <?xml version="1.0" encoding="utf-8"?> <bitmap xmlns:android="http://schemas.android.com/apk/res/android"

Android -- 自定义标题栏,背景颜色填充满

设置标题栏背景 1> 准备背景图片: background_pix.png 注:用背景图片比用颜色好处,可以让背景看起来有凹凸感. 2> drawable文件夹下放xml文件 bitmap_repeat.xml <?xml version="1.0" encoding="utf-8"?> <bitmap xmlns:android="http://schemas.android.com/apk/res/android"

自定义圆形滚动条(在自定义标题栏中显示)--利用开源项目ProgressWheel(二)

本篇是ProgressWheel使用的第二篇(尾篇),功能是在自定义标题栏中显示ProgressWheel滚动条. 本篇引用的开源项目依然是ProgressWheel,地址: https://github.com/Todd-Davies/ProgressWheel 本篇效果图: 自定义滚动条(在自定义标题栏中显示)的实现: 1)activity_progress_wheel_test. xml: <RelativeLayout xmlns:android="http://schemas.a

【起航计划 006】2015 起航计划 Android APIDemo的魔鬼步伐 05 App-&gt;Activity-&gt;Custom Title 自定义标题栏

Android UI缺省的标题栏由android:label 定义,显示在屏幕左上角,Android允许Activity自定义标题栏,使用自定义Layout重新设置标题栏,比如实现Windows Mobile 风格的标题栏. App->Activity->Custom Title 重新将Activity标题栏定义为左右两个文本框,类CustomTitle,其Layout定义R.layout.custom_title_1如下,为一左一右两个文本框: <!-- Demonstrates ho