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.Validate进行客户端验证(初级篇) 不使用微软验证控件的理由
Jun 28 Javascript
JavaScript中为什么null==0为false而null大于=0为true(个人研究)
Sep 16 Javascript
Bootstrap每天必学之前端开发框架
Nov 19 Javascript
javascript Slip.js实现整屏滑动的手机网页
Nov 25 Javascript
jQuery拖拽排序插件制作拖拽排序效果(附源码下载)
Feb 23 Javascript
Bootstrap学习笔记之环境配置(1)
Dec 07 Javascript
vue2笔记 — vue-router路由懒加载的实现
Mar 03 Javascript
jQuery实现的简单无刷新评论功能示例
Nov 08 jQuery
vue如何通过id从列表页跳转到对应的详情页
May 01 Javascript
JavaScript实现shuffle数组洗牌操作示例
Jan 03 Javascript
vue动态注册组件实例代码详解
May 30 Javascript
Javascript柯里化实现原理及作用解析
Oct 22 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
php创建session的方法实例详解
2015/01/27 PHP
PHP扩展安装方法步骤解析
2020/11/24 PHP
基于jquery的图片懒加载js
2010/06/30 Javascript
jquery 查找iframe父级页面元素的实现代码
2011/08/28 Javascript
jquery 获取表单元素里面的值示例代码
2013/07/28 Javascript
JavaScript实现简单Tip提示框效果
2016/04/20 Javascript
jQuery点击其他地方时菜单消失的实现方法
2016/04/22 Javascript
学做Bootstrap的第一个页面
2016/05/15 HTML / CSS
微信小程序 开发指南详解
2016/09/27 Javascript
详解微信小程序 页面跳转 传递参数
2016/12/08 Javascript
jQuery EasyUI 页面加载等待及页面等待层
2017/02/06 Javascript
jQuery实现鼠标响应式透明度渐变动画效果示例
2018/02/13 jQuery
详解VUE前端按钮权限控制
2019/04/26 Javascript
ES6 class类链式继承,实例化及react super(props)原理详解
2020/02/15 Javascript
Python时区设置方法与pytz查询时区教程
2013/11/27 Python
Python中用max()方法求最大值的介绍
2015/05/15 Python
在主机商的共享服务器上部署Django站点的方法
2015/07/22 Python
Python+django实现简单的文件上传
2016/08/17 Python
解决Pycharm运行时找不到文件的问题
2018/10/29 Python
pandas 如何分割字符的实现方法
2019/07/29 Python
Python函数的迭代器与生成器的示例代码
2020/06/18 Python
Python如何对齐字符串
2020/07/30 Python
HTML5 文件上传下载的实例代码
2017/07/03 HTML / CSS
联想C++笔试题
2012/06/13 面试题
电子商务专业实习生自我鉴定
2013/09/24 职场文书
临床医学专业个人的自我评价
2013/09/27 职场文书
春节联欢会主持词
2014/03/24 职场文书
捐献物资倡议书范文
2014/05/19 职场文书
企业晚会策划方案
2014/05/29 职场文书
欢度春节标语
2014/07/01 职场文书
电子专业自荐信
2014/07/01 职场文书
三八妇女节标语
2014/10/09 职场文书
2015年高三班主任工作总结
2015/05/21 职场文书
《大禹治水》教学反思
2016/02/22 职场文书
掌握这项技巧,一年阅读300本书不是梦
2019/09/12 职场文书
提高系统的吞吐量解决数据库重复写入问题
2022/04/23 MySQL