> 前边两篇文字简单介绍了一下怎么搭建electron-vue项目主进程的基本配置主进程和渲染进程之间的通讯。本文我们主要来讲解下如何动态的修改窗口大小。
通常很多桌面应用初次打开都需要登录登录窗口比较小登录成功之后展示一个更大的窗口展示登录后的信息。例如QQ钉钉有道云笔记这些应用。
那么本文就来演示下如果做到这个功能我们先做一下准备工作我们会开发一个简单的小应用来给大家展示这个功能。
这里我们选用的技术为
我们在第一篇文章的代码基础上再安装这两个依赖
安装element-ui
npm i element-ui -S
安装lowdb
npm install lowdb
配置element-ui
修改main.js
import Vue from vue;import ElementUI from element-ui;import element-ui/lib/theme-chalk/index.css;import App from ./App.vue;Vue.use(ElementUI);new Vue({el: #app,render: h > h(App)});
准备工作已经完成了接下来就进入正式的开发了
1.修改窗口大小
通常登录窗口比较小这个我们将登录窗口大小设置为宽400高550 background.js
win new BrowserWindow({width: 400,height: 550,webPreferences: {nodeIntegration: true}})
2.绘制一个登录界面
我们再src/views 文件夹下新建Login.vue文件给登录按钮加上点击事件让他跳转到Home页。(增加了登录成功失败的小逻辑)
登录
3.修改路由
src/router/index.js
import Vue from vueimport VueRouter from vue-routerimport Home from ../views/Home.vueimport Login from ../views/Login.vueVue.use(VueRouter)const routes [{path: /Home,name: Home,component: Home},{path: /,name: Login,component: Login},{path: /about,name: About,component: () > import(../views/About.vue)}]const router new VueRouter({routes})export default router
4.修改App.vue
5.修改Home.vue
进入Home页面后我们要将窗口的大小调整为正常窗口大小我们设置宽1050高700通过第二篇文章我们知道改变窗口大小是需要再主进程中才能操作我们Home页面是渲染进程所以我们这时候要用到进程间通讯。
主进程background.js增加以下代码
import { app, protocol, BrowserWindow, ipcMain } from electronipcMain.on(changWindowSize, e >win.setSize(1050, 700))
Home.vue
动态修改窗口到这儿就讲完了代码稍后会上传到gitee。下一篇我们讲解以下怎么去掉窗口自带的外边框怎么自己实现最小化最大化关闭还有新开一个窗口。
【感谢龙石为本站提供数据共享平台 http://www.longshidata.com/pages/exchange.html】