js新开窗口怎么开启（html跳转另一个网页的代码）

今天给大家分享vue3.x和electron11实现类似QQ顶部导航栏新开多窗口功能。

项目中的顶部弹窗用到了vue3自定义组件v3layer和electron新建窗口两种方式。

如上图：通过v3layer来实现弹窗功能。

vue3.0系列：Vue3自定义PC端弹窗组件V3Layer

<!-- ……设置模板 -->
<v3-layer v-model=\"isShowSettingLayer\"
	title=\"<i class=\'iconfont icon-shezhi1\'></i> 设置页面\"
	layerStyle=\"background:#f9f9f9\"
	shade=\"false\"
	:area=\"[\'550px\', \'450px\']\"
	xclose
	dragOut=\"true\"
	resize
	:maximize=\"true\"
>
	<SettingPage @logout=\"onLogout\" />
</v3-layer>

调用非常简单，支持自定义插槽内容。其中SettingPage是一个外部.vue页面。

像上面这些弹窗，则是通过electron新开窗口来实现功能。

// 关于窗口
const handleAboutWin = () => {
	createWin({
		title: \'关于\',
		route: \'/about\',
		width: 380,
		height: 280,
		resize: false,
		parent: winCfg.window.id,
		modal: true,
	})
}

// 换肤窗口
const handleSkinWin = () => {
	createWin({
		title: \'换肤\',
		route: \'/skin\',
		width: 720,
		height: 475,
		resize: false,
	})
}

// 朋友圈窗口
const handleFZoneWin = () => {
	createWin({
		title: \'朋友圈\',
		route: \'/fzone\',
		width: 550,
		height: 700,
		resize: false,
	})
}

// 界面管理器窗口
const handleUIManager = () => {
	createWin({
		title: \'界面管理器\',
		route: \'/uimanager\',
		width: 400,
		height: 475,
		resize: false,
		parent: winCfg.window.id,
		modal: true,
	})
}

// 置顶
const handleAlwaysTop = () => {
	if(data.isAlwaysOnTop) {
		win.setAlwaysOnTop(false)
		data.isAlwaysOnTop = false
	}else {
		win.setAlwaysOnTop(true)
		data.isAlwaysOnTop = true
	}
}

实现起来也非常简单，通过调用createWin函数来创建新窗口。

传入的route即为配置的路由url地址。

支持route地址带参，另外还支持自定义data参数配置。

/**
 * @desc 创建新窗口
 * @param args {object} {width: 500, height: 300, route: \'/me\', ...}
 */
export function createWin(args) {
    ipcRenderer.send(\'win-create\', args)
}

这样就实现了调用createWin方法就可以新建一个窗体。

ok，今天的分享就暂时到这里了。希望以上的内容对大家有所帮助哈！