vue2.x elementui 固定顶部、左侧菜单与面包屑，自适应 iframe 页面布局

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>