<template>
|
<flex-layout class="page-home">
|
<page-header slot="header" :class="{'show-drawer': drawer}"></page-header>
|
<div class="page-home-content" :class="{'show-drawer': drawer}">
|
<div class="tab-menu-left" @click="drawer=true">
|
<i class="el-icon-s-operation"></i>
|
</div>
|
<el-tabs v-model="acTabs" type="border-card"
|
@tab-remove="removeTab"
|
class="no-selected full-height add-m-menu flex-layout">
|
<el-tab-pane v-for="item in tabs" :key="item.name"
|
:label="item.label" :name="item.name" :closable="item.closable">
|
<iframe :name="item.name" :src="item.src" width="100%" height="100%" frameborder="0" scrolling="no"></iframe>
|
</el-tab-pane>
|
</el-tabs>
|
</div>
|
<el-drawer
|
title="我是标题"
|
:withHeader="false"
|
:visible.sync="drawer"
|
size="360px"
|
direction="ltr">
|
<page-menu
|
:ac-tabs="acTabs"
|
@select="changeTab"></page-menu>
|
</el-drawer>
|
</flex-layout>
|
</template>
|
|
<script>
|
import PageHeader from '../components/PageHeader.vue'
|
import PageMenu from '../components/PageMenu.vue'
|
|
export default {
|
components: {
|
PageHeader,
|
PageMenu
|
},
|
data() {
|
return {
|
acTabs: 'index',
|
tabs: [
|
{
|
label: '首页',
|
name: 'index',
|
src: '#/index',
|
closable: false,
|
},
|
],
|
drawer: false,
|
}
|
},
|
watch: {
|
acTabs: {
|
handler(name) { // 监测tab激活的位置
|
// 存储激活的sessionStorage
|
sessionStorage.setItem('acTabs', name);
|
},
|
immediate: true,
|
}
|
},
|
methods: {
|
removeTab(targetName) {
|
let tabs = this.tabs;
|
let activeName = this.acTabs;
|
|
if (activeName === targetName) {
|
tabs.forEach((tab, index) => {
|
if (tab.name === targetName) {
|
let nextTab = tabs[index + 1] || tabs[index - 1];
|
if (nextTab) {
|
activeName = nextTab.name;
|
}
|
}
|
});
|
}
|
|
this.acTabs = activeName;
|
this.tabs = tabs.filter(tab => tab.name !== targetName);
|
},
|
changeTab(menu) {
|
let tabs = this.tabs;
|
// 检测name是否已经存在tabs内
|
let notIn = true;
|
tabs.forEach(item=>{
|
if(item.name == menu.name) {
|
notIn = false;
|
}
|
});
|
// 不在, 添加menu到tabs中
|
if(notIn) {
|
tabs.push(menu);
|
}
|
|
// 设置激活的导航
|
this.acTabs = menu.name;
|
},
|
// 处理从子iframe中获取到的指令
|
handleMessage(msg) {
|
switch(msg.cmd) {
|
// 同步页面的指令
|
case 'syncPage':
|
this.syncPage(msg.params);
|
break;
|
}
|
},
|
syncPage(params) {
|
let tabs = this.tabs;
|
let menu = params.pageInfo;
|
// 检测name是否已经存在tabs内
|
let notIn = true;
|
tabs.forEach(item=>{
|
if(item.name == menu.name) {
|
notIn = false;
|
}
|
});
|
// 不在, 添加menu到tabs中
|
if(notIn) {
|
tabs.push(menu);
|
}
|
|
// 设置激活的导航
|
this.acTabs = menu.name;
|
}
|
},
|
mounted() {
|
window.addEventListener('message', (msg)=>{
|
// 处理数据
|
this.handleMessage(msg.data);
|
});
|
}
|
}
|
</script>
|
|
<style scoped lang="less">
|
.flex-layout {
|
display: flex;
|
height: 100%;
|
box-sizing: border-box;
|
}
|
.page-home-content {
|
position: relative;
|
height: 100%;
|
}
|
.el-science-blue .tab-menu-left {
|
position: absolute;
|
box-sizing: border-box;
|
width: 48px;
|
height: 40px;
|
line-height: 40px;
|
text-align: center;
|
z-index: 1;
|
}
|
.no-selected {
|
-webkit-user-select: none;
|
-moz-user-select: none;
|
-ms-user-select: none;
|
user-select: none;
|
}
|
.show-drawer {
|
transform: translateX(360px);
|
}
|
</style>
|
