Electron-Vue 多屏幕多窗口全屏时无法遮蔽任务栏的解决方案

项目场景:

electron-vue的一个项目
首先项目需要两个窗口,其中一个是时刻保持全屏状态,并且要适应多屏幕可以选择某个屏幕


问题描述:

无法全屏,我是两个2k屏,Win10系统,设置副屏不启用任务栏,但仍然无法遮蔽

在这里插入图片描述

解决方案:

第一种解决方案

desktopWindow = new BrowserWindow({
        fullscreen:true,
        width:width,
        height:height,
//        x:x,去掉这个
//        y:y,还有这个
        frame: false,
        show: false,
        resizable:false,
        movable:false,
        focusable:false,
        useContentSize: true,
        webPreferences: {
            devTools: true,
            webSecurity: true,
        }
    });




第二种解决方案

问题解决的关键在于要先设置x,y窗口位置,再重新设置width,height窗口大小。

desktopWindow = new BrowserWindow({
        fullscreen:false,
        x:x,
        y:y,
        frame: false,
        show: false,
        resizable:false,
        movable:false,
        focusable:false,
        useContentSize: true,
        webPreferences: {
            devTools: true,
            webSecurity: true,
        }
    });

    desktopWindow.setSize(width,height,false);




任务栏部分已经消失

在这里插入图片描述

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
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"的内容。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值