vue electron实现无边框窗口示例详解

目录
  • 一、前言
  • 二、实现方案
    • 1.创建无边框窗口
    • 2.创建windows窗口控件组件
  • 三、后记

一、前言

无边框窗口是不带外壳(包括窗口边框、工具栏等),只含有网页内容的窗口。对于一个产品来讲,桌面应用带边框的很少,因为丑(我们的UI觉得--与我无关-.-)。因此我们就来展开说下,在做无边框窗口时候需要注意的事项以及我踩过的坑。

二、实现方案

1.创建无边框窗口

要创建无边框窗口,只需在 BrowserWindow的 options 中将 frame 设置为 false

const { BrowserWindow } = require('electron')
const win = new BrowserWindow({
    width: 800,
    height: 600,
    // 设置为 `false` 时可以创建一个无边框窗口。 默认值为 `true`
    frame: false,
    // 无标题时,在mac内,窗口将一直拥有位于左上的标准窗口控制器 (“traffic lights”)
    titleBarStyle: 'hidden',
    // mac设置控制按钮在无边框窗口中的位置。
    trafficLightPosition: { x: 12, y: 18 },
    // 在windows上,设置默认显示窗口控制工具
    titleBarOverlay: { color: "#fff", symbolColor: "black", }
})
win.show()

在electron官网中有这么一段描述

titleBarStyle String (可选) macOS Windows - 窗口标题栏样式。 默认值为 default. 可能的值有

  • hidden - 在一个隐藏的标题栏和一个全尺寸大小的内容窗口中取得结果。 在 macOS 内, 窗口将一直拥有位于左上的标准窗口控制器 (“traffic lights”)。
  • 在 Windows上,当与 titleBarOverlay: true 合并时,它将激活窗口控件叠加(详情请参阅 titleBarOverlay),否则将不会显示窗口控件

titleBarOverlay Object | Boolean (可选) - 当使用无框窗口配置win.setWindowButtonVisibility(true) 在 macOS 或使用 titleBarStyle 可使标准窗口控制可见 ("traffic lights" on macOS) ,当前属性开启 Window Controls 覆盖 JavaScript APIs 和 CSS Environment Variables 指定 true 将导致覆盖默认系统颜色。 默认值为 false.

这里说两者配合使用,即titleBarStylehidden,并且titleBarOverlaytrue或者对象时,则windows系统中,应用窗口也会默认显示出window操作系统的窗口控件工具。

如图所示

这样我们就完成了,electron应用的无边框窗口。

但是这样的无边框窗口仅能实现通用的样式,应用头部总是会被占用一条高度。并且不支持自定义标题栏。若你有自定义标题栏,或者嵌入式的windows窗口控件需求,请继续往下看

2.创建windows窗口控件组件

因为我做的项目有windows窗口控件内嵌页面的需求,而且这样也方便自定义标题栏,所以需要有这样一个控件。例如下面这种情况

// WindowsTopControl.vue
<template>
  <div class="windows-top-control" :style="{height:mainHeight + 'px'}" :class="{'main-bottom':border}">
    <ul class="windows-top-control-win">
      <li @click="controlWindow(1)">
        <Icon type="最小化图标" />
      </li>
      <li @click="controlWindow(isFullScreen ? 3 : 2)">
        <Icon :type="isFullScreen ? '最大化图标' : '恢复正常图标'" />
      </li>
      <li class="close-icon"  @click="controlWindow(0)">
        <Icon type="关闭图标" />
      </li>
    </ul>
  </div>
</template>
<script>
import { mapGetters, mapMutations } from 'vuex'
const { ipcRenderer, remote } = require("electron")
const WIN_CONTROL = { // 控件四种操作
    0: 'close',
    1: 'minimize',
    2: 'maximize',
    3: 'unmaximize'
}
export default {
  name: 'windowsTopControl',
  components: {},
  props: {
    mainHeight: {
      type: String,
      default: '42'
    },
    border: {
      type: Boolean,
      default: false
    }
  },
  computed: { ...mapGetters(['isFullScreen']) },
  mounted () {
    // 上来先设定当前窗口是否在最大化的状态
    this.setIsFullScreen(remote.getCurrentWindow().isMaximized())
    // 监听是否是最大化窗口 并 更改标识是否最大化
    ipcRenderer.on('toggleMax', (e, isFullScreen) => {
      this.setIsFullScreen(isFullScreen)
    })
  },
  methods: {
    ...mapMutations(['setIsFullScreen']),
    controlWindow (val) {
      // 只有在2、3点击时,修改是否全屏状态
      if ([2, 3].includes(val)) {
        this.setIsFullScreen(val === 2)
      }
      remote.getCurrentWindow()[WIN_CONTROL[val]]()
    }
  },
}
</script>
<style lang="less" scoped>
.windows-top-control {
  width: 100%;
  height: 42px;
  display: flex;
  justify-content: flex-end;
  .windows-top-control-win {
    width: 100%;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    -webkit-app-region: drag;
    position: relative;
    li {
      width: 40px;
      height: 100%;
      text-align: center;
      line-height: 22px;
      cursor: pointer;
      -webkit-app-region: no-drag;
      position: absolute;
      pointer-events: auto;
      top: -2px;
      &:hover {
        background: #E0E4E5;
      }
      &:active {
        background: #CDCED0;
      }
      &:hover {
        color: #0183ff;
      }
      i {
        font-size: 14px;
        font-weight: 600;
        color: #1f2329;
      }
    }
    li:nth-child(1) {
      right: 78px;
    }
    li:nth-child(2) {
      right: 38px;
    }
    li:nth-child(3) {
      right: -2px;
    }
  }
}
.close-icon:hover {
  background: #FF6161 !important;
  i {
    color: #fff !important;
  }
}
.close-icon:active {
  background: #D64141 !important;
  i {
    color: #fff !important;
  }
}
.main-bottom {
  border-bottom: 1px solid #f6f6f6;
}
</style>

下面是vuex中的配置

// selectedState.js
export default {
    state: {
        // 是否全屏(最大化)
        isFullScreen: window.sessionStorage.getItem('isFullScreen') || false,
    },
    getters: {
        isFullScreen: state => state.isFullScreen
    },
    mutations: {
        setIsFullScreen(state, val) {
            state.isFullScreen = val
            window.sessionStorage.setItem('isFullScreen', val)
        }
    }
}

接下来 我们还需在主进程中,监听用户的放大、缩小、最小化、关闭的操作。

// background.js
// win是窗口实例
win.on('maximize', (event) => {
    event.sender.send('toggleMax', true)
})
win.on('unmaximize', (event) => {
    event.sender.send('toggleMax', false)
})

准备工作做完了,接下来我们就可以来引用使用组件啦,如下

// home.vue
<template>
    <div>
        <WindowsTopControl mainHeight="24" />
    </div>
</template>
<script>
import WindowsTopControl from './WindowsTopControl.vue'
export default {
    components: {
        WindowsTopControl
    }
}
</script>

以上,我们就完成了自定义的windows控件组就完成了,记得将窗口设置中的titleBarOverlay注释掉!这样我们就能自定义标题栏和内嵌windows控件了。

三、后记

如果我们自定义控件这种方式实现的话,还需要考虑一点,那就是窗口的拖拽功能,一般情况下,我们拖拽的都是是窗口的头部。这里我们可以给窗口提前注入一个js,去创建一个拖拽条,内容如下

// WindowDrag.js
// 在顶部插入一个的dom
function initTopDrag () {
  const topDiv = document.createElement('div') // 创建节点
  topDiv.style.position = 'fixed' // 一直在顶部
  topDiv.style.top = '2px'
  topDiv.style.left = '2px'
  topDiv.style.height = '18px' // 顶部20px才可拖动
  topDiv.style.width = 'calc(100% - 122px)' // 宽度100%
  topDiv.style.zIndex = '9999' // 悬浮于最外层
  // topDiv.style.pointerEvents = 'none' // 用于点击穿透
  // @ts-ignore
  topDiv.style['-webkit-user-select'] = 'none' // 禁止选择文字
  // @ts-ignore
  topDiv.style['-webkit-app-region'] = 'drag' // 拖动
  topDiv.id = 'drag-top-line'
  document.body.appendChild(topDiv) // 添加节点
}
window.addEventListener('DOMContentLoaded', function onDOMContentLoaded () {
  initTopDrag()
  document.getElementById('drag-top-line').addEventListener('dblclick', e => {
    if (window.$isMac) {
      window.ipcRenderer.send('toggleMax')
    }
  })
})

在创建窗口时候引入

// background.js
// 这里我将WindowDrag.js文件放在了public种
const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: `${__static}/WindowDrag.js`,
    }
})

如此我们就完成了拖拽条的设置。(如图所示)

以上就是vue electron实现无边框窗口示例详解的详细内容,更多关于vue electron无边框窗口的资料请关注我们其它相关文章!

(0)

相关推荐

  • vue+electron实现创建多窗口及窗口间的通信(实施方案)

    目录 一.前言 二.实施方案 1.创建多窗口 2.多窗口间的通信 三.后记 一.前言 对于一个桌面应用来说,有时候单独一个窗口用户使用起来会不太方便,比方说写日报或者查看文件等,若是在同一窗口内,我只能做一件事,不能边预览文件,边去查看聊天消息内容等.又或者是多个应用间相互关联的需要同步查看的事件,这都是极其不方便的.因此我们可以将某些集成到electron软件中的应用或者某些界面用单独的窗口打开(以下称为独立窗口). 二.实施方案 1.创建多窗口 首先我们从electron官网中找到创建窗口的

  • Vue electron零基础使用教程

    需求:给vue项目加一个外壳(electron),顾名思义也就是使用electron应用程序运行vue项目,直接将写好上线的vue项目在线地址放入electron程序中即可 操作步骤: 1.构建:构建应用程序首先要先安装electron相关依赖包以及搭建框架.在这里就不详细赘述了,直接上官网看文档https://www.electronjs.org/zh/docs/latest/tutorial/quick-start 2.打包:此时就到了重要的时候,官方指定的是使用脚手架打包-----Elec

  • Vue electron前端开启局域网接口实现流程详细介绍

    目录 一.主要实现原理 二.获取本机局域网IP 三.开启服务器 四.关闭服务器 五.简单演示 六.整体代码 七.展望 一.主要实现原理 electron本身就集成了Nodejs,简直是不要太舒服.直接用最基本的http模块开接口即可,也可以用express,看个人喜好.下面演示的是http模块. 二.获取本机局域网IP 首先要获取本机局域网的IP,这就是接口的IP地址了. // 获取本机的局域网IP function getServerIp() { let interfaces = os.net

  • vue与electron实现进程间的通信详情

    目录 一.配置内容 1.进程间的通信 第一种方式引入ipcRenderer 第二种方式引入ipcRenderer 2.渲染进程常用配置 3.将ipcMain封装到一个js中统一处理 三.总结 前言: 本文主要介绍electron渲染进程和主进程间的通信,以及在渲染进程和主进程中常用的配置项. 一.配置内容 1.进程间的通信 渲染进程和主进程间的通信主要通过ipcRenderer和ipcMain这两个模块实现的,其中ipcRenderer是在渲染进程中使用,ipcMain在主进程中使用. 其中,渲

  • 关于electron-vue打包后运行白屏的解决方案

    目录 electron-vue打包后运行白屏的解决 electron-vue打包之后只有空白页问题 原因 electron-vue打包后运行白屏的解决 找到.electron-vue文件夹中的webpack.renderer.config.js文件,注释掉下面这段 然后再重新打包,问题解决. electron-vue打包之后只有空白页问题 原因 使用了history路由导致打包之后 只有空白页面,将路由改成hash之后就有显示了 以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们.

  • 用electron 打包发布集成vue2.0项目的操作过程

    手里有个老项目是基于element admin框架下的,之前写的时候没考虑到要打包成桌面端,后期需要打包成客户端,然后就开始了一些列版本操作,看着百度了都很简单,把electron 加入到自己项目中各种不兼容,升级版本,改代码各种百度,一个国庆假期就搞了这个事情,为了后面大家少踩点坑,打算详细的写写我的踩坑之路还有版本配置(版本配置真的很有必要,不要嫌麻烦,一步一步走哈) 1.大家比较关注的版本配置表 node.js v15.0.0 electron V14.2.9 vue 2.7.8 sass

  • vue electron实现无边框窗口示例详解

    目录 一.前言 二.实现方案 1.创建无边框窗口 2.创建windows窗口控件组件 三.后记 一.前言 无边框窗口是不带外壳(包括窗口边框.工具栏等),只含有网页内容的窗口.对于一个产品来讲,桌面应用带边框的很少,因为丑(我们的UI觉得--与我无关-.-).因此我们就来展开说下,在做无边框窗口时候需要注意的事项以及我踩过的坑. 二.实现方案 1.创建无边框窗口 要创建无边框窗口,只需在 BrowserWindow的 options 中将 frame 设置为 false: const { Bro

  • 无边框窗口代码详解

    /*代码思路 此代码会以fullscreen方式打开一个空白窗口,然后用window.resize改变其大小. 最后在以写入onload="location.replace='url'"的办法将网址改变. 打开的窗口会是一个带有FRAME的窗口,其中窗口顶端会有一个高22的框架网页. 此网页是用来操纵窗口移动及关闭. */ /*说明 代码分两个部分,但总共牵涉到5个HTML文件及4个图像文件 第一部分是用来打开窗口,放在哪个文件都无所谓. 第二部分是用来控制窗口的移动及关闭,必须放在指

  • vue整合项目中百度API示例详解

    目录 官网介绍 申请密钥 官方示例 项目实战 创建地图 获取经纬度 创建Map实例 两个坐标点之间的距离 查询地点信息 Vue项目中整合百度API获取地理位置的方法 组件中使用 vue-baidu-map 百度地图官方vue组件 官网介绍 百度地图 JavaScript API 是一套由 JavaScript 语言编写的应用程序接口 可帮助您在网站中,构建功能丰富交互性强的地图应用 支持PC端和移动端,基于浏览器的地图应用开发,且支持HTML5特性的地图开发 官网传送门 百度地图JavaScri

  • vue组件生命周期钩子使用示例详解

    目录 组件生命周期图 组件生命周期钩子 1.beforeCreate 2.created 3.beforeMount 4.mounted 5.beforeUpdate 6.updated 7.activated 8.deactivated 9.beforeDestroy 10.destroyed 11.errorCaptured 组件生命周期图 组件生命周期钩子 所有的生命周期钩子自动绑定 一.组件的生命周期:一个组件从创建到销毁的整个过程 二.生命周期钩子:在一个组件生命周期中,会有很多特殊的

  • Vue.js实现watch属性的示例详解

    目录 1.写在前面 2.watch的实现原理 3.立即执行的watch与回调执行时机 立即执行的回调函数 回调函数的执行时机 4.过期的副作用函数和cleanup 5.写在最后 1.写在前面 在上篇文章中,我们讨论了compted的实现原理,就是利用effect和options参数进行封装.同样的,watch也是基于此进行封装的,当然watch还可以传递第三参数去清理过期的副作用函数.不仅可以利用副作用函数的调度性,去实现回调函数的立即执行,也可以控制回调函数的执行时机. 2.watch的实现原

  • Vue transx组件切换动画库示例详解

    目录 来个介绍 安装 使用 支持参数 支持事件 支持API 支持的动画类型 说明 来个介绍 先奉上组件库的名称:transx github地址:github.com/tnfe/transx npm参考: www.npmjs.com/package/tra… 示例地址:codesanbox 安装 npm install transx or yarn add transx 使用 <!-- 包裹动画元素 --> <trans-x :time="time" :delay=&q

  • vue实现At人文本输入框示例详解

    目录 知识前置 需求分析 实现 创建能够输入文本的文本框 添加at功能 后记 知识前置 基于vue手把手教你实现一个拥有@人功能的文本编辑器(其实就是微信群聊的输入框) Selection 对象,表示用户选择的文本范围或插入符号的当前 developer.mozilla.org/zh-CN/docs/… contenteditable 是一个枚举属性,表示元素是否可被用户编辑. developer.mozilla.org/zh-CN/docs/… 需求分析 文本框能够输入文本(太简单了) 能够a

  • Springboot Vue可配置调度任务实现示例详解

    目录 正文 1.表结构: 2.接口: 3.业务层: 4.Mapper 5.前端(Vue): 正文 Springboot + Vue,定时任务调度的全套实现方案. 这里用了quartz这个框架,实现分布式调度任务很不错,关于quarz的使用方式改天补一篇.相当简单. 1.表结构: sys_job 列名 数据类型 长度 是否可空 是否主键 说明 job_id bigint 否 是 任务ID job_name varchar 64 否 是 任务名称 job_group varchar 64 否 是 任

  • vue弹窗父子组件调用问题示例详解

    目录 一.vue弹窗 父子组件 emit 传图片 二.vue父组件调用子组件里的不同方法 一.vue弹窗 父子组件 emit 传图片 1.:modal-append-to-body="false"为了解决element ui中引入dialog窗口组件后遮罩层会挡住dialog窗口的用处,默认为true,改为false即可解决. 2.此弹窗主要为了解决收到下位机急停信号后,上位机前台显示弹窗的重复性. //此为子组件(customComponents.vue) <div> &

  • vue的ssr服务端渲染示例详解

    为什么使用服务器端渲染 (SSR) 更好的 SEO,由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面. 请注意,截至目前,Google 和 Bing 可以很好对同步 JavaScript 应用程序进行索引.在这里,同步是关键.如果你的应用程序初始展示 loading 菊花图,然后通过 Ajax 获取内容,抓取工具并不会等待异步完成后再行抓取页面内容.也就是说,如果 SEO 对你的站点至关重要,而你的页面又是异步获取内容,则你可能需要服务器端渲染(SSR)解决此问题. 更快的内容到达时间 (ti

随机推荐