element侧栏固定，header固定，利用ref

hotqin888

发布于 2019-04-09 15:30:07

6.4K0

发布于 2019-04-09 15:30:07

文章被收录于专栏：hotqin888的专栏

element的Container 布局容器如下，可是如何保证header和aside固定呢？

<el-container>
  <el-header>Header</el-header>
  <el-container>
    <el-aside width="200px">Aside</el-aside>
    <el-main>Main</el-main>
  </el-container>
</el-container>

官方例子：

<el-container style="height: 500px; border: 1px solid #eee">
  <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
    <el-menu :default-openeds="['1', '3']">
      <el-submenu index="1">

原来是要将container页面高度固定，height: 500px

实际使用过程中，可以获取屏幕高度，然后用vue中的ref获取对象

html:

<template>
  <div id="app">
    <el-container ref="homePage">

script:

  export default {
    name: 'App',
    data(){
      return {

        clientHeight:'',
      }
    },
    mounted(){
      // 获取浏览器可视区域高度
      this.clientHeight =   `${document.documentElement.clientHeight}`              
      //document.body.clientWidth;
      //console.log(self.clientHeight);
      window.onresize = function temp() {
        this.clientHeight = `${document.documentElement.clientHeight}`;
      };
    },
    watch: {
      // 如果 `clientHeight` 发生改变，这个函数就会运行
      clientHeight: function () {
        this.changeFixed(this.clientHeight)
      }
    },

    methods:{

      changeFixed(clientHeight){ //动态修改样式
        // console.log(clientHeight);
        // console.log(this.$refs.homePage.$el.style.height);
        this.$refs.homePage.$el.style.height = clientHeight-20+'px';
      },
    },
  }

关键是用 this.$refs.homePage.$el.style.height = clientHeight-20+'px';

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2019年03月23日，如有侵权请联系 cloudcommunity@tencent.com 删除

html