html跳轉另一個網頁的代碼：js新開窗口怎麼開啟

今天給大家分享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，今天的分享就暫時到這裡了。希望以上的內容對大家有所幫助哈！