electron-vue多显示屏下将新窗口投放是其他屏幕

display对象可以获取所有显示屏
此处演示程序启动是投放新窗口至另一屏幕
import { app, BrowserWindow } from 'electron'
const electron = require('electron') //获取electron对象
let newWindow
function createWindow () {
  /**
   *主窗口省略
   */
  let displays = electron.screen.getAllDisplays()
  let externalDisplay = displays.find((display) => {
  return display.bounds.x !== 0 || display.bounds.y !== 0
  })
  if (externalDisplay) {
  newWindow = new BrowserWindow({
  fullscreen:false,
   x: externalDisplay.bounds.x + 500,
  y: externalDisplay.bounds.y + 50,
  width: 1000,
  height: 800
  })
  newWindow.loadURL(newURL)
  }
  newWindow.on('closed', () => {
  newWindow = null
  })
}
app.on('ready', createWindow)

转载于:https://www.cnblogs.com/zhj-hu/p/11136734.html

  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
electron-vue是一个将VueElectron结合的项目,可以方便地创建多窗口应用程序。下面是一个演示如何在electron-vue中创建多窗口的例子: 1. 首先,在renderer目录下创建一个新的Vue组件,例如`SecondWindow.vue`,用于作为第二个窗口的内容。 ```vue <template> <div> <h1>Second Window</h1> <p>This is the content of the second window.</p> </div> </template> <script> export default { name: 'SecondWindow' } </script> ``` 2. 在`renderer/router/index.js`文件中,添加一个新的路由路径,用于打开第二个窗口。 ```javascript import SecondWindow from '@/components/SecondWindow.vue' // ... const routes = [ // ... { path: '/second', name: 'SecondWindow', component: SecondWindow } ] // ... ``` 3. 在`renderer/App.vue`文件中,添加一个按钮,用于打开第二个窗口。 ```vue <template> <div> <h1>Main Window</h1> <p>This is the content of the main window.</p> <router-link to="/second">Open Second Window</router-link> </div> </template> <script> export default { name: 'App' } </script> ``` 4. 在`renderer/main.js`文件中,添加一个新的窗口创建函数,用于创建第二个窗口。 ```javascript import { createApp } from 'vue' import SecondWindow from './components/SecondWindow.vue' // ... function createSecondWindow() { const secondWindow = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true } }) secondWindow.loadURL(process.env.WEBPACK_DEV_SERVER_URL + '#/second') // ... return secondWindow } // ... ``` 5. 在需要打开第二个窗口的地方调用`createSecondWindow`函数。 ```javascript // ... ipcMain.on('open-second-window', () => { const secondWindow = createSecondWindow() // ... }) // ... ``` 现在,你可以通过点击"Open Second Window"按钮来打开第二个窗口,并在第二个窗口中显示"Second Window"的内容。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值