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

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

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

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

vue3.0系列：vue3自定义pc端弹窗组件v3layer

<!-- ……设置模板 --><v3-layer v-model="isshowttinglayer"title="<i class='iconfont icon-shezhi1'></i> 设置页面"layerstyle="background:#f9f9f9"shade="fal":area="['550px', '450px']"xclodragout="true"resize:maximize="true"><ttingpage @logout="onlogout" /></v3-layer>

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

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

// 关于窗口const handleaboutwin = () => {createwin({title: '关于',route: '/about',width: 380,height: 280,resize: fal,parent: wincfg.window.id,modal: true,})}// 换肤窗口const handleskinwin = () => {createwin({title: '换肤',route: '/skin',width: 720,height: 475,resize: fa肖石l,})}// 朋友圈窗口const handlefzonewin = () => {createwin({title: '朋友圈',route: '/fzone',width: 550,height:虎年春节祝福语大全 700,resize: fal,})}// 界面管理器窗口const handleuimanager = () => {createwin({title: '界面管理器',route: '/uimanager',width: 400,height: 475,resize: fal,parent: wincfg.window.id,modal: true,})}// 置顶const handlealwaystop = () => {if(data.isalwaysontop) {win.talwaysontop(fal)data.isalwaysontop = fal}el {win.talwaysontop(true)data.isalwaysontop = true}}

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

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

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

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

这样就实现了调用createw左忠毅公逸事翻译in方法就可以新建一个窗体。

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