文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2024-04-02 19:55

关注

一、前言

无边框窗口是不带外壳(包括窗口边框、工具栏等),只含有网页内容的窗口。对于一个产品来讲,桌面应用带边框的很少,因为丑(我们的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. 可能的值有

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无边框窗口的资料请关注编程网其它相关文章!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯