Vue 多系统切换实现方案(iframe嵌套的两三事)
前言
公司分好几个后台模块,统一使用vue+elementUi框架开发,每一个后台模块都是单独团队开发的。并且几个系统整体的风格、布局一样的,包括左侧边栏,上方的面包屑等
用户在使用的时候,可能要切换别的系统就要在浏览器里,新打开窗口,再输入网址,回车。
总结来说,低效,所以现在想将几个系统融合到一个里边,并且每次切换系统的时候保留用户的操作。
线上demo:http://an888.net/all/#/
github:https://github.com/Mrblackant...
效果如图:
实现思路
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>
前端小学生,欢迎大家来指正、交流
推荐阅读
mpvue写小程序遇到的问题总结(自己用mpvue实现一个小程序的tabbar,vantUi的使用)
公司要开发一个小程序,面向用户分为3种角色,所以要自己手写个tabbar(文章编辑中,届时将链接放过来)因为也是时隔很久写小程序,就选择了跟vue相近的mpvue来写,或多或少也遇到了点问题,现总结一下。
大师兄赞 5阅读 5.4k评论 4
安全地在前后端之间传输数据 - 「3」真的安全吗?
在「2」注册和登录示例中,我们通过非对称加密算法实现了浏览器和 Web 服务器之间的安全传输。看起来一切都很美好,但是危险就在哪里,有些人发现了,有些人嗅到了,更多人却浑然不知。就像是给门上了把好锁,还...
边城赞 31阅读 7.2k评论 5
涨姿势了,有意思的气泡 Loading 效果
今日,群友提问,如何实现这么一个 Loading 效果:这个确实有点意思,但是这是 CSS 能够完成的?没错,这个效果中的核心气泡效果,其实借助 CSS 中的滤镜,能够比较轻松的实现,就是所需的元素可能多点。参考我们...
chokcoco赞 20阅读 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
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。