宁波网站建设方案报价,手机能建设网站吗,彬县网房屋出租,开发app的工具说明
在写electron项目时#xff0c;只有一个主窗口不足以满足需求#xff0c;我们通常还会打开很多个窗口。 怎么打开一个子窗口像微信的聊天界面一样#xff0c;全贴合在一起#xff0c;看起来像一个整体呢#xff1a;
分析
这个窗口有点像element ui中的抽屉(drawe…说明
在写electron项目时只有一个主窗口不足以满足需求我们通常还会打开很多个窗口。 怎么打开一个子窗口像微信的聊天界面一样全贴合在一起看起来像一个整体呢
分析
这个窗口有点像element ui中的抽屉(drawer)但是我们知道electron主体就是一个容器盒子而抽屉只能在容器盒子内部显示很明显贴合窗口并不能用抽屉来实现。 那么久只能新建一个窗口了需要考虑以下几点
新开贴合窗口的左侧需要与主窗口的右侧贴合即x坐标一致新开贴合窗口的顶部要与主窗口的顶部对齐即顶部y坐标一致新开贴合窗口的高度要与主窗口高度一致因为主窗口可能会被拉伸
获取主窗口的高度
此处的height是主窗口高度在触发ipcMain.on事件时把高度赋值给贴合窗口的高度
const [ width, height ] mainWindow.getSize();计算坐标
假设主窗口名为mainWindow那么获取x,y坐标赋值给新建的贴合窗口
x: mainWindow.getPosition()[0] mainWindow.getSize()[0], // 位置在主窗口右侧
y: mainWindow.getPosition()[1],关键代码
新建贴合窗口
new BrowserWindow({width: 250, // 可自定义固定值height: height, // 上面动态获取的height值x: mainWindow.getPosition()[0] mainWindow.getSize()[0],y: mainWindow.getPosition()[1],autoHideMenuBar: true,resizable: false,titleBarStyle: hidden,frame: true,transparent: true,hasShadow: false,backgroundColor: #F7F7F7,webPreferences: {preload: join(__dirname, ../preload/index.js),sandbox: false,contextIsolation: false}
})效果图
