首页 > 网名大全 正文
‘qq空间导航栏名字’qq空间的导航栏怎么关?

时间:2023-05-15 14:20:26 阅读: 评论: 作者:佚名

今天给大家分享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: winC, 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: winC, modal: true, }) } // 置顶 const handleAlwaysTop = () => { i) { win.setAlwaysOnTop(false) da = false }else { win.setAlwaysOnTop(true) da = true } }

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

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

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

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

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

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

  • 评论列表

发表评论: