vue 屏幕自适应 + 页面布局

最新推荐文章于 2024-08-09 10:37:06 发布

知了枝头看雪

最新推荐文章于 2024-08-09 10:37:06 发布

阅读量678

点赞数

文章标签： html css vue.js

本文链接：https://blog.csdn.net/weixin_44941581/article/details/120493580

版权

在这里插入图片描述

代码：

<template>
  <el-container style="height: 100%; background-color: #DBDBDB">
    <el-header style="padding: 2px">
      <nav-header></nav-header>
    </el-header>
    <el-container style="padding-top: 10px">
      <el-aside width="10%"  style="background-color: rgb(238, 241, 246)">
          <nav-side :style="defaultHeightSide"></nav-side>
      </el-aside>
<!--      以下是嵌入各个子模块部分-->
        <sys-main v-if="this.$route.query.index === '0'"></sys-main>
        <sys-huanjing-jiance v-if="this.$route.query.index === '1'"></sys-huanjing-jiance>

    </el-container>
  </el-container>
</template>

<script>
import NavSide from './nav/NavSide'
import NavHeader from './nav/NavHeader'
import SysHuanjingJiance from './sys/sys_huanjing_jiance'
import SysMain from './sys/sys_main'
export default {
  components: {NavHeader, NavSide, SysHuanjingJiance, SysMain},
  data () {
    return {
      defaultHeightSide: {
        height: ''
      }
    }
  },
  beforeDestroy () {
  },
  mounted () {
  },
  created () {
    window.addEventListener('resize', this.getHeight)
    this.getHeight()
  },
  methods: {
    getHeight () {
      this.defaultHeightSide.height = window.innerHeight - 92 + 'px'
    }
  }
}
</script>

<style>
</style>