效果圖
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>後臺管理系統</title>
<script src="./vue.min.js"></script>
<link rel="stylesheet" href="./iview.css">
<!-- import iView -->
<script src="./iview.min.js"></script>
<script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<style type="text/css">
body,html{
margin:0;
padding: 0;
background: #ffffff;
}
.layout-header{
position: fixed;
width:100%;
height:60px;
padding-left: 0px;
padding-right: 0px;
}
.layout-content{
position:absolute;
right:0;
left:0;
top:60px;
bottom:1px;
overflow: hidden;
background: #fff;
}
.layout-footer{
background: green;
height:60px;
line-height:60px;
position: fixed;
bottom: 0;
width:100%;
color:#fff;
text-align: center;
}
.layout-logo{
width: 80px;
height: 30px;
line-height: 30px;
background: #5b6270;
border-radius: 3px;
float: left;
position: relative;
top: 15px;
left: 30px;
}
/*frame頁面距離上面導航的16pxmargin-bottm的距離*/
/*.ivu-tabs-bar{
margin-bottom: 0px;
}*/
</style>
</head>
<body>
<div id="app">
<layout class="layout">
<i-header class="layout-header">
<i-menu mode="horizontal" theme="dark" active-name="1">
<div class="layout-logo"></div>
</i-menu>
</i-header>
<div class="layout-content">
<Row>
<i-col span="3">
<!-- 初始打開一個頁面 active-name="1-1" -->
<!-- 初始打開一個頁面 :open-names="[menuData[0].name]" -->
<!-- 每次只展示一個accordion -->
<i-menu width="auto" @on-select="menuSelect" :style="{height:mainHeight +'px',overflow:'auto','padding-bottom':'80px'}">
<Submenu v-for="item in menuData" :name="item.name">
<template slot="title">
<Icon :type="item.iconType"></Icon>{{item.name}}
</template>
<menu-item v-for="mi in item.childMenu" :name="mi.id">
{{mi.name}}
</menu-item>
</Submenu>
</i-menu>
</i-col>
<i-col span="21">
<Tabs type="card" @on-tab-remove="removeTab" @on-click="clickTab" :animated="false" :value="activeTab">
<template v-for="(item,index) in mainTabs">
<tab-pane :label="item.name" closable :name="item.id">
<iframe frameborder="0" width="100%"
:height="frameHeight" marginheight="0"
scrolling="auto" marginwidth="0"
:src="item.url">
</iframe>
</tab-pane>
</template>
</Tabs>
</i-col>
</Row>
</div>
</layout>
<!-- <div class="layout-footer">
2017-2018 © http://wallimn.iteye.com
</div> -->
</div>
<script type="text/javascript">
var vue = new Vue({
el:'#app',
data:function() {
return {
menuData:[
{
id : '1',
name:'菜單1',
iconType : 'ios-analytics',
childMenu:[
{id:'1-1',name:'菜單1-1',url:'./1111.html'},
{id:'1-2',name:'菜單1-2',label:'',url:'http://tool.chinaz.com/Tools/unixtime.aspx'},
{id:'1-3',name:'菜單1-3',label:'菜單1-3',url:'./ceshi.html'},
{id:'1-4',name:'菜單1-4',label:'菜單1-4',url:'http://www.baidu.com'},
]
},
{ id:'2',
name:'菜單2',
iconType : 'ios-analytics',
childMenu:[
{id:'2-1',name:'菜單2-1',url:'http://wallimn.iteye.com'},
{id:'2-2',name:'菜單2-2',url:'http://www.baidu.com'},
{id:'2-3',name:'菜單2-3',url:'http://www.baidu.com'},
{id:'2-4',name:'菜單2-4',url:'http://www.baidu.com'}
]
},
{ id:'3',
name:'菜單3',
iconType : 'ios-analytics',
childMenu:[
{id:'3-1',name:'菜單2-1',url:'http://wallimn.iteye.com'},
{id:'3-2',name:'菜單2-2',url:'http://www.baidu.com'},
{id:'3-3',name:'菜單2-3',url:'http://www.baidu.com'},
{id:'3-4',name:'菜單2-4',url:'http://www.baidu.com'}
]
},
{ id:'4',
name:'菜單4',
iconType : 'ios-analytics',
childMenu:[
{id:'4-1',name:'菜單2-1',url:'http://wallimn.iteye.com'},
{id:'4-2',name:'菜單2-2',url:'http://www.baidu.com'},
{id:'4-3',name:'菜單2-3',url:'http://www.baidu.com'},
{id:'4-4',name:'菜單2-4',url:'http://www.baidu.com'}
]
},
{ id:'5',
name:'菜單5',
iconType : 'ios-analytics',
childMenu:[
{id:'5-1',name:'菜單5-1',url:'http://wallimn.iteye.com'},
{id:'5-2',name:'菜單5-2',url:'http://www.baidu.com'},
{id:'5-3',name:'菜單5-3',url:'http://www.baidu.com'},
{id:'5-4',name:'菜單5-4',url:'http://www.baidu.com'}
]
}
],
activeTab : null,
mainHeight: 0,
frameHeight: 0,
mainTabs:[]
};
},
mounted:function(){
this.setFrameHeight();
},
methods:{
//1.選擇一個菜單
menuSelect:function( id ) {
var tab = this.getTab( id );
if( tab == null )
{
var mi = this.getMenuItem( id );
if( mi != null ) this.mainTabs.push( mi );
}
this.activeTab = id;
},
//2.移除tab頁面
removeTab : function ( id ) {
var tabIndex = this.getTab( id );
if( tabIndex != null ) {
this.mainTabs.splice( tabIndex, 1 );
}
},
//根據名稱來查找對應的菜單條目
getMenuItem : function( id ) {
for( let sm = 0; sm < this.menuData.length; sm++ ) {
for( let mi = 0; mi < this.menuData[sm].childMenu.length; mi++ ) {
if( this.menuData[sm].childMenu[mi].id == id ) {
return this.menuData[sm].childMenu[mi];
break;
}
}
}
return null;//這個應該不可能發生
},
//根據名稱查找對應的Tab頁。
getTab : function( id ) {
for( let index = 0; index < this.mainTabs.length; index++ ) {
if( this.mainTabs[ index ].id == id ) {
return index;
break;
}
}
return null;//沒有找到
},
setFrameHeight:function(){
//調整掉一些補白的值
this.mainHeight = (document.documentElement.scrollHeight || document.body.scrollHeight);
this.frameHeight = this.mainHeight-110;
},
//解決chrome瀏覽器中tab切換滾動條消失的問題。
clickTab : function( id ) {
// var vm = this;
// vm.frameHeight -= 1;
// window.setTimeout( function(){
// vm.frameHeight = vm.frameHeight + 1;
// }, 100 );
},
}
});
//瀏覽器窗口發生變化時同時變化DIV高度
window.onresize= vue.setFrameHeight;
</script>
</body>
</html>