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)
posted @ 2020-05-21 11:47  FancyAnnaYL  阅读(2017)  评论(1编辑  收藏  举报