Vue 多系统切换实现方案(iframe嵌套的两三事)

前言

公司分好几个后台模块,统一使用vue+elementUi框架开发,每一个后台模块都是单独团队开发的。并且几个系统整体的风格、布局一样的,包括左侧边栏,上方的面包屑
用户在使用的时候,可能要切换别的系统就要在浏览器里,新打开窗口,再输入网址,回车。
总结来说,低效,所以现在想将几个系统融合到一个里边,并且每次切换系统的时候保留用户的操作
线上demo:http://an888.net/all/#/
github:https://github.com/Mrblackant...

效果如图:

clipboard.png

实现思路

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>

前端小学生,欢迎大家来指正、交流

可以假装很努力,但结果不会骗你

1.1k 声望
165 粉丝
0 条评论
推荐阅读
mpvue写小程序遇到的问题总结(自己用mpvue实现一个小程序的tabbar,vantUi的使用)
公司要开发一个小程序,面向用户分为3种角色,所以要自己手写个tabbar(文章编辑中,届时将链接放过来)因为也是时隔很久写小程序,就选择了跟vue相近的mpvue来写,或多或少也遇到了点问题,现总结一下。

大师兄5阅读 5.4k评论 4

安全地在前后端之间传输数据 - 「3」真的安全吗?
在「2」注册和登录示例中,我们通过非对称加密算法实现了浏览器和 Web 服务器之间的安全传输。看起来一切都很美好,但是危险就在哪里,有些人发现了,有些人嗅到了,更多人却浑然不知。就像是给门上了把好锁,还...

边城31阅读 7.2k评论 5

封面图
涨姿势了,有意思的气泡 Loading 效果
今日,群友提问,如何实现这么一个 Loading 效果:这个确实有点意思,但是这是 CSS 能够完成的?没错,这个效果中的核心气泡效果,其实借助 CSS 中的滤镜,能够比较轻松的实现,就是所需的元素可能多点。参考我们...

chokcoco20阅读 2.1k评论 2

在前端使用 JS 进行分类汇总
最近遇到一些同学在问 JS 中进行数据统计的问题。虽然数据统计一般会在数据库中进行,但是后端遇到需要使用程序来进行统计的情况也非常多。.NET 就为了对内存数据和数据库数据进行统一地数据处理,发明了 LINQ (L...

边城17阅读 1.9k

封面图
【已结束】SegmentFault 思否写作挑战赛!
SegmentFault 思否写作挑战赛 是思否社区新上线的系列社区活动在 2 月 8 日 正式面向社区所有用户开启;挑战赛中包含多个可供作者选择的热门技术方向,根据挑战难度分为多个等级,快来参与挑战,向更好的自己前进!

SegmentFault思否20阅读 5.6k评论 10

封面图
过滤/筛选树节点
又是树,是我跟树杠上了吗?—— 不,是树的问题太多了!🔗 相关文章推荐:使用递归遍历并转换树形数据(以 TypeScript 为例)从列表生成树 (JavaScript/TypeScript) 过滤和筛选是一个意思,都是 filter。对于列表来...

边城18阅读 7.7k评论 3

封面图
Vue2 导出excel
2020-07-15更新 excel导出安装 {代码...} src文件夹下新建一个libs文件夹,新建一个excel.js {代码...} vue页面中使用 {代码...} ===========================以下为早期的文章今天在开发的过程中需要做一个Vue的...

原谅我一生不羁放歌搞文艺14阅读 19.9k评论 9

可以假装很努力,但结果不会骗你

1.1k 声望
165 粉丝
宣传栏