桂林骏程网站建设,代做机械毕业设计网站,网络规划设计师目录,做视频找素材的网站有哪些#xfeff; 本文我们讲解下怎么修改窗口样式#xff0c;系统默认的窗口非常普通#xff0c;通常与设计不符#xff0c;所以我们要自定义#xff0c;接下来我们讲解下怎么去掉原有样式#xff0c;怎么实现实现窗口的最小化#xff0c;最大化和关闭按钮。还有怎么打开… 本文我们讲解下怎么修改窗口样式系统默认的窗口非常普通通常与设计不符所以我们要自定义接下来我们讲解下怎么去掉原有样式怎么实现实现窗口的最小化最大化和关闭按钮。还有怎么打开一个新页面前三篇文章传送门electron-vue跨平台桌面应用开发实战教程一——Hello Worldelectron-vue跨平台桌面应用开发实战教程二——主进程常用配置electron-vue跨平台桌面应用开发实战教程三——动态修改窗口大小我们基于上一篇文章的代码上一篇文章的git地址https://gitee.com/hedavid/electron-vue-demos接着写。先看下上一篇文章实现的样式 接下来我们就要开始今天的讲解了1.去掉外边框我们修改background.js修改createWindow方法创建BrowserWindow时增加 frame: falsewin 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.vuetemplatedivel-calendar v-modelvalue/el-calendar/div
/templatescript
export default {name: Calendar,data () {return {value: new Date()}}
}
/script
4.2 修改router{path: /Calendar,name: Calendar,component: Calendar
},
4.3 修改background.jsconst 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)
}
接下来我们看下效果 以上就是今天的全部内容下一篇我们讲一下怎么发系统通知最小化到托盘剪贴板
