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 miscellanea -display data real time, using window.status
Jan 09 Javascript
javascript引用类型指针的工作方式
Apr 13 Javascript
全面解析Bootstrap表单使用方法(表单样式)
Nov 24 Javascript
JavaScript文本框脚本编写的注意事项
Jan 25 Javascript
a标签置灰不可点击的实现方法
Feb 06 Javascript
BootStrap daterangepicker 双日历控件
Jun 02 Javascript
p5.js入门教程之键盘交互
Mar 19 Javascript
vue+elementUI实现图片上传功能
Aug 20 Javascript
解决vue cli使用typescript后打包巨慢的问题
Sep 30 Javascript
element form 校验数组每一项实例代码
Oct 10 Javascript
JS常用排序方法实例代码解析
Mar 03 Javascript
小程序实现侧滑删除功能
Jun 25 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
Mysql数据库操作类( 1127版,提供源码下载 )
2010/12/02 PHP
php设计模式 Strategy(策略模式)
2011/06/26 PHP
PHP正确配置mysql(apache环境)
2011/08/28 PHP
深入Memcache的Session数据的多服务器共享详解
2013/06/13 PHP
php常用数学函数汇总
2014/11/21 PHP
PHP文件上传、客户端和服务器端加限制、抓取错误信息、完整步骤解析
2017/01/12 PHP
javascript 动态调整图片尺寸实现代码
2009/12/28 Javascript
JS 表单验证大全
2011/11/23 Javascript
基于jquery的用鼠标画出可移动的div
2012/09/06 Javascript
javascript代码运行不出来执行错误的可能情况整理
2013/10/18 Javascript
JavaScript Math.ceil 方法(对数值向上取整)
2015/01/09 Javascript
最新最热最实用的15个jQuery插件汇总
2015/07/05 Javascript
Node.js与Sails ~项目结构与Mvc实现及日志机制
2015/10/14 Javascript
jquery拖动改变div大小
2017/07/04 jQuery
js将键值对字符串转为json字符串的方法
2018/03/30 Javascript
小程序实现发表评论功能
2018/07/06 Javascript
基于AngularJs select绑定数字类型的问题
2018/10/08 Javascript
从源码里了解vue中的nextTick的使用
2018/11/22 Javascript
关于自定义Egg.js的请求级别日志详解
2018/12/12 Javascript
vue组件开发props验证的实现
2019/02/12 Javascript
Typescript的三种运行方式(小结)
2019/09/18 Javascript
vue+layui实现select动态加载后台数据的例子
2019/09/20 Javascript
vue 获取url参数、get参数返回数组的操作
2020/11/12 Javascript
Python中列表和元组的相关语句和方法讲解
2015/08/20 Python
浅谈python中列表、字符串、字典的常用操作
2017/09/19 Python
快速了解Python相对导入
2018/01/12 Python
pycharm 安装JPype的教程
2019/08/08 Python
python基于TCP实现的文件下载器功能案例
2019/12/10 Python
OpenCV+python实现实时目标检测功能
2020/06/24 Python
css3绘制天猫logo实现代码
2012/11/06 HTML / CSS
什么是View State?
2013/01/27 面试题
什么是ARP(Address Resolution Protocol)地址解析协议
2013/10/31 面试题
招商业务员岗位职责
2013/12/16 职场文书
个人房屋转让协议书范本
2014/10/26 职场文书
2015年汽车销售工作总结
2015/04/07 职场文书
2015年度酒店客房部工作总结
2015/05/25 职场文书