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 相关文章推荐
javascript getElementsByName()的用法说明
Jul 31 Javascript
jQuery之DOM对象和jQuery对象的转换与区别分析
Jan 08 Javascript
jQuery实现360°全景拖动展示
Mar 18 Javascript
Jquery zTree 树控件异步加载操作
Feb 25 Javascript
bootstrap timepicker在angular中取值并转化为时间戳
Jun 13 Javascript
解决vue.js在编写过程中出现空格不规范报错的问题
Sep 20 Javascript
纯js实现隔行变色效果
Nov 29 Javascript
详解jQuery-each()方法
Mar 13 jQuery
微信小程序API—获取定位的详解
Apr 30 Javascript
一文快速了解JQuery中的AJAX
May 31 jQuery
JS工厂模式开发实践案例分析
Oct 17 Javascript
纯js+css实现仿移动端淘宝网站的弹出详情框功能
Dec 29 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中的魔术方法总结和使用实例
2015/05/11 PHP
写了一个layout,拖动条连贯,内容区可为iframe
2007/08/19 Javascript
jQuery中:enabled选择器用法实例
2015/01/04 Javascript
jQuery+HTML5实现手机摇一摇换衣特效
2015/06/05 Javascript
javascript中undefined与null的区别
2015/08/16 Javascript
AngularJs Scope详解及示例代码
2016/09/01 Javascript
让编辑器支持word复制黏贴、截屏的js代码
2016/10/17 Javascript
Bootstrap整体框架之CSS12栅格系统
2016/12/15 Javascript
Web制作验证码功能实例代码
2017/06/19 Javascript
Electron 如何调用本地模块的方法
2019/02/01 Javascript
微信小程序mpvue点击按钮获取button值的方法
2019/05/29 Javascript
Vue项目实现换肤功能的一种方案分析
2019/08/28 Javascript
jquery弹窗时禁止body滚动条滚动的例子
2019/09/21 jQuery
JS实现横向轮播图(初级版)
2020/06/24 Javascript
JS常用排序方法实例代码解析
2020/03/03 Javascript
Vue发布订阅模式实现过程图解
2020/04/30 Javascript
vue 微信分享回调iOS和安卓回调出现错误的解决
2020/09/07 Javascript
解决基于 keep-alive 的后台多级路由缓存问题
2020/12/23 Javascript
[54:24]Optic vs TNC 2018国际邀请赛小组赛BO2 第二场
2018/08/18 DOTA
Python脚本判断 Linux 是否运行在虚拟机上
2015/04/25 Python
使用Python对Csv文件操作实例代码
2017/05/12 Python
简单实现python收发邮件功能
2018/01/05 Python
Python解析Excle文件中的数据方法
2018/10/23 Python
python构建指数平滑预测模型示例
2019/11/21 Python
python中numpy.empty()函数实例讲解
2021/02/05 Python
使用 CSS3 中@media 实现网页自适应的示例代码
2020/03/24 HTML / CSS
巴西最大的珠宝连锁店:Vivara
2019/04/18 全球购物
shell变量的作用空间是什么
2013/08/17 面试题
鉴史问廉观后感
2015/06/10 职场文书
鲁冰花观后感
2015/06/10 职场文书
《你在为谁工作》心得体会(共8篇)
2016/01/20 职场文书
《童年》读后感(三篇)
2019/08/27 职场文书
八年级作文之友情
2019/11/25 职场文书
go语言中json数据的读取和写出操作
2021/04/28 Golang
入门学习Go的基本语法
2021/07/07 Golang
Nginx 路由转发和反向代理location配置实现
2021/11/11 Servers