electron 无边框 放大 缩小 全屏 复原 100%可行

electron 自带的边框是在是太丑了 感觉没有人会有原生的边框
去掉边框

项目演示
github地址
gitee地址

视频展示

ranAdmin-electron

就可以实现无边框 但是问题来了 这样下 程序不能拖拽

解决拖拽
-webkit-app-region: drag; // 只需要加上这个css 属性就能拖拽 缺单就是不能点击 不会触发事件
-webkit-app-region: no-drag; // 加上这个属性能点击但是不能拖拽

思路实现一个假的 边框给用户拖拽

新建 desktop.vue 在 app.vue 页面引入就行了

<!--
 * @name: name
 * @description: Description
 * @lastEditors: Francis
 * @date: Do not edit
 * @lastEditTime: Do not edit
 * @filePath: Do not edit
-->
<template>
    <div class="header_desktop " :style="!borderTop?'background:none':''">
        <div class="flex space-between" >
            <div class="drag-box" @dblclick="winMax">
            </div>
            <div class="pointer "  v-if="borderTop">
                <svgView svg="min"  :title="'最小化'" @click="winMin"></svgView> 
                <svgView svg="max" title="最大化" class="margin-lr-1x" v-if="windowFlag" @click="winMax"></svgView> 
                <svgView svg="recove" title="最大化" class="margin-lr-1x" v-else @click="winMax"></svgView> 
                <svgView svg="close" title="关闭" @click="winClose"></svgView> 
            </div>
        </div>
    </div>
</template> 
<script setup>
    import {
        computed,
        ref,
    } from "@vue/reactivity";
    import store from "@/store";
    import {
        useRouter
    } from 'vue-router';
    import svgView from "@/common/svg/svg.vue"
    const borderTop = computed(() => store.getters.borderTop)
    const ipcRenderer = window.ipcRenderer
    const windowFlag=ref(false)
    const winMin=()=>{
        ipcRenderer.send("winMin")
    }
    const winMax=()=>{
        console.log( windowFlag.value)
        ipcRenderer.send("winMax",windowFlag.value)
        windowFlag.value= !windowFlag.value
    }
    const winClose=()=>{
        ipcRenderer.send("winClose")
    }
</script>
<style scoped lang="less">
.header_desktop{
    position: fixed;
    top:0;
    left:0;
    right:0;
    height:22px;
    background:rgba(0, 0, 0, .2);
    z-index: 10;
    padding-right:10px;
   
    svg{
        color:#FFF;
    }
    .drag-box{
        height: 22px;
        -webkit-app-region: drag;  // 告诉electron 区域氪拖拽
        -webkit-user-select: none; // 禁用文本
        width:calc(100vw - 100px);
    }
}
</style>

这一块区域可以拖拽

如果觉得抽 可以把背景设置为透明

下面实现 放大 缩小 全面 一级复原

// dest
  const ipcRenderer = window.ipcRenderer
    const windowFlag=ref(false)
    // 窗口缩小 
    const winMin=()=>{
        ipcRenderer.send("winMin")
    }
    // 窗口全屏
    const winMax=()=>{
        console.log( windowFlag.value)
        ipcRenderer.send("winMax",windowFlag.value)
        windowFlag.value= !windowFlag.value
    }
    // 关闭
    const winClose=()=>{
        ipcRenderer.send("winClose")
    }

// background.js 
// 窗口全屏
ipcMain.on("winMax",(event,flag)=>{
// mainWindow.isMaximized() 在 frame == false 的情况下 永远返回 false ，mainWindow.restore() 也会失效
// 所有不能用它来做判断  我们直接定义一个开关来记录是否全屏给他

  if (flag) {
    mainWindow.setContentSize(1200, 670); //重新设置窗口客户端的宽高值（例如网页界面），这里win.setSize(x,y)并不生效。
    mainWindow.center(); // 窗口居中
} else {
    mainWindow.maximize();
}
})

// 窗口缩小 
ipcMain.on("winMin",()=>{
  mainWindow.hide()
})
// 窗口关闭
ipcMain.on("winClose",()=>{
  app.exit()
})