> 本文我們講解下怎么修改窗口樣式，系統默認的窗口非常普通，通常與設計不符，所以我們要自定義，接下來我們講解下怎么去掉原有樣式，怎么實現實現窗口的最小化，最大化和關閉按鈕。還有怎么打開一個新頁面

前三篇文章傳送門

electron-vue跨平臺桌面應用開發實戰教程（一）——Hello World

electron-vue跨平臺桌面應用開發實戰教程（二）——主進程常用配置

electron-vue跨平臺桌面應用開發實戰教程（三）——動態修改窗口大小

我們基于上一篇文章的代碼（上一篇文章的git地址：https://gitee.com/hedavid/electron-vue-demos）接著寫。先看下上一篇文章實現的樣式：

接下來我們就要開始今天的講解了

1.去掉外邊框

我們修改background.js，修改createWindow方法，創建BrowserWindow時增加
frame: false

win = new BrowserWindow({width: 400,height: 550,frame: false,webPreferences: {nodeIntegration: true}})

這樣窗口就會變成這樣：

但是現在又有一個新問題，應用沒有關閉按鈕，沒有最小化按鈕，也不能拖拽移動位置了，接下來我們為他創建一個工具條。

2.增加操作欄

（注意：在此處還涉及到其他頁面的樣式調整，在這里就不列舉了，查看git上的代碼即可） 我們修改Login.vue，增加以下代碼（只展示關鍵代碼，部分樣式和html請查看git上的代碼）：

const { ipcRenderer } = require('electron') // 點擊最小化按鈕調用的方法 minimize () {ipcRenderer.send('minimize') }, // 點擊關閉按鈕調用的方法 close () {ipcRenderer.send('close') },

窗口的拖動需要增加以下樣式：

-webkit-app-region: drag; // 可拖動 -webkit-app-region: no-drag; // 不可拖動

3.主線程中增加對應的最小化和關閉窗口的方法

ipcMain.on('close', e =>win.close() )ipcMain.on('minimize', e =>win.minimize() )

接下來我們改造一下主頁面，來實現打開新窗口的功能

4. 打開新窗口

4.1 新建Calendar.vue

<template><div><el-calendar v-model="value"></el-calendar></div> </template><script> export default {name: 'Calendar',data () {return {value: new Date()}} } </script>

4.2 修改router

{path: '/Calendar',name: 'Calendar',component: Calendar },

4.3 修改background.js

const winURL = process.env.NODE_ENV === 'development'? 'http://localhost:8080': `file://${__dirname}/index.html`

上邊這段代碼主要是用來解決vue路由訪問頁面的問題，端口號是vue啟動的默認端口號，如果有需要可以自行修改

win.loadURL(winURL)

上邊這段代碼主要是修改主窗口加載的url，修改我我們上邊聲明的那個

// 定義calendar窗體 let calendarWin // 創建calendar窗口方法 function openCalendarWindow () {calendarWin = new BrowserWindow({width: 400,height: 550,parent: win, // win是主窗口webPreferences: {nodeIntegration: true}})calendarWin.loadURL(winURL + '#/Calendar')calendarWin.on('closed', () => { calendarWin = null }) } ipcMain.on('openCalendarWindow', e =>openCalendarWindow() )

上邊這段代碼是打開新窗口的代碼，calendarWin.loadURL(winURL + '#/Calendar') 是指向我們上邊創建的頁面。

4.4 在Home.vue頁面中調用創建新窗口的方法

openCalendarWindow () {ipcRenderer.send('openCalendarWindow') }

接下來我們看下效果

以上就是今天的全部內容，下一篇我們講一下怎么發系統通知，最小化到托盤，剪貼板

總結

以上是生活随笔為你收集整理的vue 拖动 datatransfer 问题_electron-vue跨平台桌面应用开发实战教程（四）——窗口样式amp;打开新窗口...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。