前言
公司分好几个后台模块,统一使用vue+elementUi框架开发,每一个后台模块都是单独团队开发的。并且几个系统整体的风格、布局一样的,包括左侧边栏,上方的面包屑等
用户在使用的时候,可能要切换别的系统就要在浏览器里,新打开窗口,再输入网址,回车。
总结来说,低效,所以现在想将几个系统融合到一个里边,并且每次切换系统的时候保留用户的操作。
https://github.com/Mrblackant/vueIframe
效果如图:
实现思路
1.结合iframe开发上方系统切换的组件
2.各个子系统有自己的域名
开发
因为每个页面都需要这个切换功能,所以我们直接在app.vue里开发。我是用vue+element开发的,所以切换的地方直接用了ele的tab切换组件。(写法有很多种,主要是思路)
读完这些话再看代码,方便理解:
1.如果用v-if控制每个iframe的显示隐藏,那么切换后系统后,再切换回来,iframe的属性会使页面会刷新,用户的操作不能保留
2.如果纯粹用elementUi的tab组件来做,页面一进来,就会把每个系统的资源加载进来,卡的要命,所以需要做到按需加载
3.实现:结合1、2问题,用v-if控制页面一进来,只加载一个默认的系统;tab切换的时候再利用v-if去加载该系统的资源;v-if只控制一次,不会随着tab的切换变化,这样就能保证切换系统时保留了用户的操作。
代码
app.vue
<template> <div id="app"> <div class="allWapper"> <!-- logo --> <div class="myLogo"> <img src="/UploadFiles/2021-04-02/mylogo.png">
风云阁资源网 Design By www.bgabc.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
风云阁资源网 Design By www.bgabc.com
暂无评论...
更新日志
2024年10月09日
2024年10月09日
- TGA主持人发文祝贺《暗喻幻想》 国外网友:提名稳了?
- 【原神】V5.0攻略 | 旋曜玉帛收集攻略(序号81~序号90)
- 【原神】V5.0攻略 | 旋曜玉帛收集攻略(序号91~序号100)
- 2024周年庆兑换码最新分享,兑换码一览
- 无悔华夏魏晋二期全新剧本更新内容一览
- 斗罗大陆逆转时空提升战力攻略 怎么提升战力
- 炉石传说酒馆战棋阵容推荐2024 酒馆战棋阵容排行榜
- s14全球总决赛瑞士轮抽签规则是什么 瑞士轮抽签结果规则介绍
- s14全球总决赛瑞士轮队伍有哪些 世界赛瑞士轮队伍名单一览
- s14全球总决赛瑞士轮赛制是什么 全球总决赛瑞士轮赛制详情
- 《COD21》全新剧情宣传片:10月25日XGP见!
- 美国拳王家门口身中7枪遇害 年仅31岁凶手仍未被逮捕
- 《寂静岭2》重制版光追对比:氛围更加恐怖
- 林慧萍.1982-往昔(飞跃复刻版)【歌林】【WAV+CUE】
- 陈楚生.2007-原来我一直都不孤单(EP)【天娱传媒】【WAV+CUE】