Electron + VUE 用window.open形式打开新窗口
一、主页面:<template><div class="header"><span class="el-icon-minus" @click="minimizeWin"></span><span class="el-icon-full-screen" @click="maximizeWin"></span><span c
·
一、主页面:
<template>
<div class="header">
<span class="el-icon-minus" @click="minimizeWin"></span>
<span class="el-icon-full-screen" @click="maximizeWin"></span>
<span class="el-icon-close" @click="closeWin"></span>
<el-button @click.stop="openWind">打开新窗口</el-button>
</div>
</template>
<script>
import { ipcRenderer} from 'electron';
export default {
methods: {
minimizeWin(){
ipcRenderer.send('window-min') // 通知主进程我要进行窗口最小化操作
},
maximizeWin(){
ipcRenderer.send('window-max')
},
closeWin(){
ipcRenderer.send('window-close')
},
openWind(){
const { href } = this.$router.resolve({
path: `/answerSituation`,
query: {
id: row.id,
paperName: this.paperName,
name: row.name,
examScore: row.examScore,
answersTime: row.answersTime
}
})
window.open(href, '_blank')
}
}
}
</script>
<style lang="scss">
.header{
span{
font-size:20px;
margin-right:20px;
color:red;
}
}
</style>
二、新窗口页面:
<template>
<div class="header">
<span class="el-icon-minus" @click="minimizeWin"></span>
<span class="el-icon-full-screen" @click="maximizeWin"></span>
<span class="el-icon-close" @click="closeWin"></span>
</div>
</template>
<script>
import { remote } from 'electron';
export default {
methods: {
minimizeWin(){
remote.getCurrentWindow().minimize(); // 窗口最小化
},
maximizeWin(){
const win=remote.getCurrentWindow();
if(win.isMaximized()){ // 判断 窗口是否已最大化
win.restore();// 恢复原窗口大小
}else{
win.maximize(); //最大化窗口
}
},
closeWin(){
window.close(); // 关闭窗口,也结束了所有进程
}
}
}
</script>
<style lang="scss">
.header{
span{
font-size:20px;
margin-right:20px;
color:red;
}
}
</style>
三、遇到的问题
之前的项目,引用electron的remote可以直接调用 electron.remote
来去使用,而近期使用electron却频繁报错???踩坑后我快速去查看了下官方文档,是不是electron进行了更新?果然不出所料,在electron 10中,修改了enableRemoteModule默认为false,我们需要手动将其修改为true。
此前版本中我们使用electron中的remote模块时,不需在主进程的窗口中加入 enableRemoteModule:true
参数才能够调用remote模块,而在 electron 10 中,我们需要加入该参数才能调用该模块。
//引入electron
let electron = require('electron')
//引入remote模块
let remote = electron.remote
//打印remote模块
console.log(remote)
在未加入参数前,会引起报错。
而在主进程中我们需要向 webPreferences 配置参数 enableRemoteModule:true
来打开remote模块,使得渲染进程中可以调用主进程的方法,我们需要对mianWindow来配置
mainWindow = new BrowserWindow({
width:600,
height:800,
/* 启用Node继承 */
webPreferences:{
nodeIntegration:true,
enableRemoteModule:true
}
})
问题解决,踩坑完毕。
更多推荐
已为社区贡献17条内容
所有评论(0)