竟然不缓存?
在使用Element ui 的时候,发现Tabs挺好用,于是做了这样一个页面:左侧是菜单,右侧顶部是Tabs,右侧下方是iframe.一切就绪,问题出现,就是每次点菜单的时候,Tabs就会新增一个页签,这导致iframe增加不少.于是想了个办法,来解决这个问题.
- 在menu菜单中,index直接为页面的名称;
- 在Select事件中,拿到index就可以请求页面了;
- 请求页面的时候,先判断页面是否已经存在于缓存中.如果存在则直接激活该页签,不存在就先添加到Tabs,然后激活,并放入缓存中.
- over……
但这样,存在另外一个问题:如果有几十个菜单,会堆叠几十个iframe.侧面一想,如果共用一个iframe,那么会出现另外一个问题,就是可能在上一个页面只输入了一部分文本,还没处理就切换页签,会丢失上个页面的数据.
于是,在菜单量不多的情况下,还是每个页签一个单独的iframe.便于处理.
源码
只有main.html是有实质内容的,其余html都是为了演示数据.
代码可以直接在本地运行,可以保存成文件,进行运行.
main.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<title>系统管理</title>
<link href="https://cdn.bootcss.com/element-ui/1.4.0/theme-default/index.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
<script src="https://cdn.bootcss.com/element-ui/1.4.0/index.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.left-menu {
width: 200px;
}
</style>
</head>
<body>
<h1 class="title">系统管理</h1>
<div id="app">
<template>
<el-row>
<el-col :span="4"><div class="grid-content bg-purple">
<el-menu default-active="userList" class="left-menu" @select="menuSelect" :collapse="isCollapse">
<el-submenu index="1">
<template slot="title">
<span slot="title">用户</span>
</template>
<el-menu-item-group>
<el-menu-item index="userList">用户列表</el-menu-item>
<el-menu-item index="userAdd">用户添加</el-menu-item>
</el-menu-item-group>
</el-submenu>
<el-submenu index="2">
<template slot="title">
<span slot="title">权限</span>
</template>
<el-menu-item-group>
<el-menu-item index="roleList">权限列表</el-menu-item>
<el-menu-item index="roleAdd">权限添加</el-menu-item>
</el-menu-item-group>
</el-submenu>
</el-menu>
</div>
</el-col>
<el-col :span="20">
<div class="grid-content bg-purple-light">
<el-tabs v-model="editableTabsValue" closable @tab-remove="removeTab" type="card">
<el-tab-pane :key="item.name" v-for="(item, index) in editableTabs" :label="item.title" :name="item.name">
<iframe class="iframepage" :src="item.content" width="100%" onload="changeFrameHeight()" style="border: none;" height="100%"></iframe>
</el-tab-pane>
</el-tabs>
</div>
</el-col>
</el-row>
</template>
</div>
<script>
Vue.config.devtools = true;
var Main = {
data() {
return {
isCollapse: false,
editableTabsValue: '1',
editableTabs: [{
title: '用户列表',
name: '1',
content: 'userList.html',
closable: false
}],
tabInfoObj: {}, // 缓存tabs打开的页签.
tabIndex: 1
}
},
methods: { //给自定义的组件绑定事件
selectMenu(key) {
var title = '';
switch (key) {
case 'userList':
title = '用户列表';
break;
case 'userAdd':
title = '用户添加';
break;
case 'roleList':
title = '权限列表';
break;
case 'roleAdd':
title = '权限添加';
break;
}
return title;
},
menuSelect(key, keyPath) {
if (this.tabInfoObj[key]) { // 判断,如果页签已经打开,则直接切换.
this.editableTabsValue = this.tabInfoObj[key] + '';
} else { // 如果页面未打开,则直接打开并添加到缓存对象中.
this.tabIndex += 1;
this.tabInfoObj[key] = this.tabIndex;
let newTabName = this.tabIndex + '';
this.editableTabs.push({
title: this.selectMenu(key),
name: newTabName,
content: key + '.html'
});
this.editableTabsValue = newTabName;
}
},removeTab(targetName) {
// 关闭页签的时候,同时将其从缓存中删除(否则将导致后面不能再次添加).
for (var a in this.tabInfoObj) {
if(this.tabInfoObj[a]==targetName){
delete this.tabInfoObj[a];
break;
}
};
let tabs = this.editableTabs;
let activeName = this.editableTabsValue;
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.editableTabsValue = activeName;
this.editableTabs = tabs.filter(tab => tab.name !== targetName);
}
},
created: function() {
// 把第一个页面添加到缓存中.
this.tabInfoObj.userList = '1';
}
};
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
// 设置iframe高度自适应.
function changeFrameHeight() {
var ifm = document.getElementsByClassName("iframepage");
for (var i = ifm.length - 1; i >= 0; i--) {
ifm[i].height = document.documentElement.clientHeight;
};
}
window.onresize = function() {
changeFrameHeight();
}
// 设置iframe高度自适应 end.
</script>
</body>
</html>roleList.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<title>权限列表</title>
</head>
<body>
权限列表
</body>
</html>userAdd.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<title>用户添加</title>
</head>
<body>
用户添加
</body>
</html>userList.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<title>用户列表</title>
</head>
<body>
用户列表
</body>
</html>roleAdd.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<title>权限添加</title>
</head>
<body>
权限添加
</body>
</html>