electron-vue的多窗口插件
使用说明:https://npm.taobao.org/package/electron-vue-windows
https://github.com/hxkuc/electron-vue-windows
https://www.ctolib.com/hxkuc-electron-vue-windows.html
首先安装electron-vue 然后安装此插件执行如下操作
npm i -S electron-vue-windows
在renderer/main.js里初始化加入以下代码(注意本插件依赖于vue和vue-router需要在vue和vue-router初始化完毕再加载)
import Vue from 'vue'
import router from './router' // 此处router文件为你的路由配置文件
import Win from 'electron-vue-windows'
// 初始化插件,要传入实例化的路由
Win.init(router, {
freeWindowNum: 2, // 初始空闲窗口数量(选填:默认为1)
port: 9080 // 端口号(选填:默认9080)
})
Vue.prototype.$Win = Win
使用插件
index.vue
let data = await this.$Win.openWin({
// browserwindow原生属性
width: 700, // 窗口宽
height: 600, // 窗口高
// electron-vue-windows自定义的属性
windowConfig: {
router: '/user', // 路由 *必填
data: {id: 1}, // 传送数据
name: 'user' // 窗口名称
}
})
console.log(data) // 新窗口返回的数据 {value: 2}
ser.vue
获取传入的参数
let data = this.$Win.getParameter()
console.log(data) // {id: 1}
返回数据并关闭当前窗口
let data = {value: 2}
this.$Win.closeWin(data)