vue elementui 固定顶部、左侧菜单与面包屑,自适应 iframe 页面布局
疑问点:iframe无法高度100%,如果写了100%就会有滚动条,所以只写了99.5%
【效果图】
路由示例
javascript
const routes = [
{
title: 'Index',
path: '/',
name: "Index",
component: () => import('@/views/Index.vue'),
},
{
title: 'TEST',
path: '/TEST', // 使用内部页面时,路径为 "#/TEST"
name: "TEST",
component: () => import('@/views/TEST.vue'),
},
]
页面完整代码
javascript
<template>
<div class="container">
<div class="top">
<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
<el-menu-item index="1">Home</el-menu-item>
<el-submenu index="2">
<template slot="title">Options</template>
<el-menu-item index="2-1">Option1</el-menu-item>
<el-menu-item index="2-2">Option2</el-menu-item>
<el-submenu index="2-4">
<template slot="title">Option3</template>
<el-menu-item index="2-4-1">Option3-1</el-menu-item>
<el-menu-item index="2-4-2">Option3-2</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="3" disabled>Msg</el-menu-item>
<el-menu-item index="4"><a href="https://www.ele.me" target="_blank">Order</a></el-menu-item>
</el-menu>
</div>
<div class="wrap">
<div class="l">
<p style="margin-top: 32px;">aside-bar</p>
</div>
<div class="r">
<div class="bread-wrap">
<el-breadcrumb separator="/">
<el-breadcrumb-item>首页</el-breadcrumb-item>
<el-breadcrumb-item><a href="/">活动管理</a></el-breadcrumb-item>
<el-breadcrumb-item>活动列表</el-breadcrumb-item>
<el-breadcrumb-item>活动详情</el-breadcrumb-item>
</el-breadcrumb>
</div>
<div class="iframe-wrap">
<iframe :src="iframeUrl" width="100%" height="99.5%" frameborder="0"></iframe>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
activeIndex: '1',
// iframeUrl: '#/TEST', // 关键点:使用内部页面的话,要按这样写
iframeUrl: 'https://www.baidu.com',
}
},
methods: {
handleSelect(key, keyPath) {
console.log(key, keyPath);
}
}
}
</script>
<style scoped lang="less">
.container {
display: flex;
flex-direction: column;
height: 100vh;
color: #fff;
&>.top {
height: 48px;
background: #212121;
}
&>.wrap {
flex: 1;
display: flex;
height: 0;
&>.l {
width: 200px;
background: #212121;
}
&>.r {
overflow-y: hidden;
display: flex;
flex-direction: column;
flex: 1;
width: 0;
background: #fff;
.bread-wrap {
display: flex;
align-items: center;
height: 48px;
}
.iframe-wrap {
overflow-y: auto;
flex: 1;
height: 0;
}
}
}
}
.el-menu {
height: 100%;
background: transparent;
}
/deep/.el-menu--horizontal>.el-submenu .el-submenu__title,
.el-menu--horizontal>.el-menu-item,
.el-menu--horizontal>.el-submenu .el-submenu__title {
height: 48px;
line-height: 48px;
color: #ccc;
}
.el-menu--horizontal>.el-menu-item.is-active {
color: #fff;
}
.el-menu.el-menu--horizontal {
border-bottom: solid 1px #000;
}
</style>