Electron+vue3 自定义边框

老頭子
736 阅读1分钟

上一篇介绍了项目的建立以及打包，这一篇主要讲下不使用electron自带的外边框，自定义外边框实现最小化、最大化、关闭和拖拽

要自定义边框需先将frame的值为false

const win = new BrowserWindow({
    width: 1296,
    height: 693,
    frame: false,//自定义边框需要为false
  })

我们需要用到ipcMain和ipcRenderer方法来进行通信

在background.ts中引入ipcMain，并且在createWindow的BrowserWindow下方加上最小化、最大化和关闭的事件

  import { app, protocol, BrowserWindow,ipcMain  } from 'electron'
  ipcMain.on('window-max', () => {
    if(win.isMaximized()) {
      win.restore()
    }else{
      win.maximize()
    }
  }),
  ipcMain.on('window-min', function () {
    win.minimize();
  })
  ipcMain.on('window-close', function () {
    console.log("关闭");
    win.close();
  }),

接着，在vue文件中引入ipcRenderer并在下方加上对应的通信方法

   <div class="tool-win no-drag">
      <div class="item cursor" @click="onChangeWindow('min')">
        <svg t="1655259273075" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2803" width="16" height="16"><path d="M810.666667 554.666667H213.333333c-25.6 0-42.666667-17.066667-42.666666-42.666667s17.066667-42.666667 42.666666-42.666667h597.333334c25.6 0 42.666667 17.066667 42.666666 42.666667s-17.066667 42.666667-42.666666 42.666667z" fill="#2c2c2c" p-id="2804"></path></svg>      
      </div>
      <div class="item cursor" v-if="isMax" @click="onChangeWindow('scale')">
        <svg t="1655259165159" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2427" width="16" height="16"><path d="M768 170.666667h-341.333333c-46.933333 0-85.333333 38.4-85.333334 85.333333v85.333333H256c-46.933333 0-85.333333 38.4-85.333333 85.333334v341.333333c0 46.933333 38.4 85.333333 85.333333 85.333333h341.333333c46.933333 0 85.333333-38.4 85.333334-85.333333v-85.333333h85.333333c46.933333 0 85.333333-38.4 85.333333-85.333334V256c0-46.933333-38.4-85.333333-85.333333-85.333333zM256 768v-341.333333h341.333333v341.333333H256z m512-170.666667h-85.333333v-170.666666c0-46.933333-38.4-85.333333-85.333334-85.333334h-170.666666V256h341.333333v341.333333z" fill="#2c2c2c" p-id="2428"></path></svg>
      </div>
      <div class="item cursor" v-else @click="onChangeWindow('scale')">
        <svg t="1655259143272" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2224" width="16" height="16"><path d="M768 170.666667H256c-46.933333 0-85.333333 38.4-85.333333 85.333333v512c0 46.933333 38.4 85.333333 85.333333 85.333333h512c46.933333 0 85.333333-38.4 85.333333-85.333333V256c0-46.933333-38.4-85.333333-85.333333-85.333333zM256 768V256h512v512H256z" fill="#2c2c2c" p-id="2225"></path></svg>
      </div>
      <div class="item cursor" @click="onChangeWindow('close')">
        <svg t="1655259187200" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2630" width="16" height="16"><path d="M571.733333 512l247.466667-247.466667c17.066667-17.066667 17.066667-42.666667 0-59.733333s-42.666667-17.066667-59.733333 0L512 452.266667 264.533333 204.8c-17.066667-17.066667-42.666667-17.066667-59.733333 0s-17.066667 42.666667 0 59.733333l247.466667 247.466667-247.466667 247.466667c-17.066667 17.066667-17.066667 42.666667 0 59.733333 8.533333 8.533333 21.333333 12.8 29.866667 12.8s21.333333-4.266667 29.866666-12.8l247.466667-247.466667 247.466667 247.466667c8.533333 8.533333 21.333333 12.8 29.866666 12.8s21.333333-4.266667 29.866667-12.8c17.066667-17.066667 17.066667-42.666667 0-59.733333L571.733333 512z" fill="#2c2c2c" p-id="2631"></path></svg>      
      </div>
    </div>
    
var { ipcRenderer } = window.require("electron");
setup(){
    const isMax = ref(false) // 最大化和还原
     //放大缩小关闭
    const onChangeWindow = (type:string)=>{
      switch (type) {
          case 'min':
            console.log("缩小");
            ipcRenderer.send('window-min')
            break;
          case 'scale':
            ipcRenderer.send('window-max')
            isMax.value = !isMax.value
            break;
          case 'close':
            console.log("关闭");
            ipcRenderer.send('window-close')
            break;
      }
    }
}

ipcMain和ipcRenderer关联的名称需要相同，此时运行的时候会报错window.require() is not function 需要在background.ts文件中修改下

const win = new BrowserWindow({
    width: 1296,
    height: 693,
    frame: false,//自定义边框需要为false
    show:false,
    webPreferences: {
      contextIsolation: false, // 设置此项为false后，才可在渲染进程中使用electron api
      nodeIntegration: true,
    } ,
  })

修改完后就可以进行最小化、最大化、关闭了。

关于拖拽，可在你所需要的地方加上

    -webkit-app-region: drag;//不需要拖拽的话改成no-drag即可

但是，会发现双击可拖拽区域放大和缩小发现最大化和还原的图标并未进行改变

需要在刚刚的vue页面修改下

var { ipcRenderer, remote } = window.require("electron");
const onChangeWindow = (type:string)=>{
      switch (type) {
          case 'min':
            console.log("缩小");

            ipcRenderer.send('window-min')
            break;
          case 'scale':
            ipcRenderer.send('window-max')
            const winInfo = remote.getCurrentWindow()
            console.log("winInfo:",winInfo);
            
            isMax.value = winInfo.isMaximized()
            break;
          case 'close':
            console.log("关闭");
            ipcRenderer.send('window-close')
            break;
      }
    }
    ipcRenderer.on("main-window-max",()=>{
      isMax.value = true;
    })
    ipcRenderer.on("main-window-unmax",()=>{
      isMax.value = false;
    })

OK！搞定

avatar
文章
阅读
粉丝