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)