Vue多系统切换实现方案


Posted in Javascript onJune 05, 2018

前言

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

https://github.com/Mrblackant/vueIframe

效果如图:

Vue多系统切换实现方案

实现思路

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>
Javascript 相关文章推荐
方便实用的jQuery checkbox复选框全选功能简单实例
Oct 09 Javascript
把Node.js程序加入服务实现随机启动
Jun 25 Javascript
解决angular的post请求后SpringMVC后台接收不到参数值问题的方法
Dec 10 Javascript
jQuery 全选 全部选 反选 实现代码
Aug 17 Javascript
jQuery查找节点并获取节点属性的方法
Sep 09 Javascript
实例讲解JavaScript中call、apply、bind方法的异同
Sep 13 Javascript
javaScript和jQuery自动加载简单代码实现方法
Nov 24 jQuery
React如何避免重渲染
Apr 10 Javascript
微信小程序 checkbox使用实例解析
Sep 09 Javascript
vue项目配置使用flow类型检查的步骤
Mar 18 Javascript
完美解决通过IP地址访问VUE项目的问题
Jul 18 Javascript
基于js实现的图片拖拽排序源码实例
Nov 04 Javascript
jQuery实现的简单对话框拖动功能示例
Jun 05 #jQuery
vue2.0 自定义组件的方法(vue组件的封装)
Jun 05 #Javascript
vue使用技巧及vue项目中遇到的问题
Jun 04 #Javascript
jQuery实现的滑块滑动导航效果示例
Jun 04 #jQuery
jQuery实现常见的隐藏与展示列表效果示例
Jun 04 #jQuery
js如何找出字符串中的最长回文串
Jun 04 #Javascript
详解Webpack + ES6 最新环境搭建与配置
Jun 04 #Javascript
You might like
星际争霸, 教主第一视角, ZvT经典龙蛇演义
2020/03/02 星际争霸
PHP sprintf()函数用例解析
2011/05/18 PHP
PHP CodeBase:将时间显示为&quot;刚刚&quot;&quot;n分钟/小时前&quot;的方法详解
2013/06/06 PHP
PHP循环遍历数组的3种方法list()、each()和while总结
2014/11/19 PHP
javascript 一些用法小结
2009/09/11 Javascript
jQuery中click事件用法实例
2014/12/26 Javascript
Jquery实现鼠标移动放大图片功能实例
2015/03/25 Javascript
AngularJS的内置过滤器详解
2015/05/14 Javascript
javascript模拟C#格式化字符串
2015/08/26 Javascript
AngularJS 文件上传控件 ng-file-upload详解
2017/01/13 Javascript
angularjs之$timeout指令详解
2017/06/13 Javascript
JavaScript 值类型和引用类型的初次研究(推荐)
2017/07/19 Javascript
使用JavaScript实现表格编辑器(实例讲解)
2017/08/02 Javascript
在vue中解决提示警告 for循环报错的方法
2018/09/28 Javascript
小程序富文本提取图片可放大缩小
2020/05/26 Javascript
基于Python实现一个简单的银行转账操作
2016/03/06 Python
python实现excel读写数据
2021/03/02 Python
python远程连接MySQL数据库
2019/04/19 Python
一行Python代码制作动态二维码的实现
2019/09/09 Python
python科学计算之scipy——optimize用法
2019/11/25 Python
Python递归调用实现数字累加的代码
2020/02/25 Python
Python + selenium + crontab实现每日定时自动打卡功能
2020/03/31 Python
使用Python将Exception异常错误堆栈信息写入日志文件
2020/04/08 Python
python 负数取模运算实例
2020/06/03 Python
为世界各地的女性设计和生产时尚服装:ROMWE
2016/09/17 全球购物
澳大利亚冒险体验:Adrenaline(跳伞、V8赛车、热气球等)
2017/09/18 全球购物
门卫班长岗位职责
2013/12/15 职场文书
幼儿园安全检查制度
2014/01/30 职场文书
路政管理毕业自荐书范文
2014/02/10 职场文书
小学数学国培感言
2014/03/10 职场文书
贷款担保申请书
2014/05/20 职场文书
优秀家长事迹材料(2016推荐版)
2016/02/29 职场文书
Python requests库参数提交的注意事项总结
2021/03/29 Python
python使用tkinter实现透明窗体上绘制随机出现的小球(实例代码)
2021/05/17 Python
Python Matplotlib绘制等高线图与渐变色扇形图
2022/04/14 Python
ConditionalOnProperty配置swagger不生效问题及解决
2022/06/14 Java/Android