Vue多系统切换实现方案
2018-06-05 08:53
711 查看
公司分好几个后台模块,统一使用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="/static/mylogo.png"> </div> <!-- 顶部tabs --> <el-tabs v-model="activeName" @tab-click="handleClick"> <el-tab-pane class="temp" label="VUE" name="first"> <iframe v-if="ifArr.first" class="ifa" scrolling=auto src="http://panjiachen.github.io/vue-element-admin/#/dashboard" frameborder="0"></iframe> </el-tab-pane> <el-tab-pane class="temp" label="SF" name="second"> <iframe v-if="ifArr.second" class="ifa" scrolling=auto src="https://segmentfault.com/" frameborder="0"></iframe> </el-tab-pane> <el-tab-pane class="temp" label="百度" name="third"> <iframe v-if="ifArr.third" class="ifa" scrolling=auto src="https://www.baidu.com/" frameborder="0"></iframe> </el-tab-pane> </el-tabs> </div> <!-- </div> --> <!-- <router-view/> --> </div> </template> <script> export default { name: 'App', data(){ return{ activeName: 'first', ifArr:{ first:true, second:false, third:false } } }, methods:{ handleClick(tab, event) { let flagName=tab.name this.ifArr[flagName]=true } } } </script> <style> body{ margin:0; padding:5px; } .ifa{ width:100%; height:100%; } .el-tabs__content{ border: 1px solid red; border-top:none; position: absolute; top: 62px; left: 0; bottom: 0; right: 0; // width:100%; // height:80%; } .allWapper{ display:flex; border-bottom:1px solid #e4e7ed; } .el-tabs__header{ margin-bottom:0px; } .el-tabs__header .el-tabs__item{ margin:8px 0; font-size:16px; padding-left:29px; } .temp{ width:100%; height:100%; } .myLogo{ width: 200px; height: 53px; margin-right:35px; } .myLogo img{ width:100%; } </style>
您可能感兴趣的文章:
相关文章推荐
- ThinkPad X230安装Ubuntu实现双系统的优雅方案
- 比特币系统采用的公钥密码学方案和ECDSA签名算法介绍——第二部分:代码实现(C语言)
- 集群系统实现方案详解
- java开发系统内核:实现进程自动切换,再现Linus当年辉煌一刻
- Linux 服务器集群系统实现方案详解
- Spring中Bean多种实现切换方案
- 微信管理系统基于Flask+Vue+Celery+SQLAlchemy+Redis等实现
- 关于一个银行系统的具体应用实现方案的讨论
- (Android实战系统二)Android网络互动传输方案选择和实现
- Vue + Element UI 实现权限管理系统 前端篇(七):功能组件封装
- Linux 服务器集群系统实现方案详解
- RabbitMQ开源企业级消息队列系统实现方案(单机版)
- Vue.js组件tab实现选项卡切换
- vue实现选项卡及选项卡切换效果
- Vue中使用vue-i18插件实现多语言切换功能
- 分布式系统下利用 AOP 实现 session 身份验证的一种方案
- 系统数据权限的实现方案 推荐
- PowerBuilder多层C/S系统的实现方案
- vue实现tab切换外加样式切换方法
- Spring中Bean多种实现切换方案