zoukankan      html  css  js  c++  java
  • element-ui 左侧导航菜单跟随右侧内容高度变化

    1、说下本次产品需求

          (1)左侧菜单的高度根据右侧内容高度的改变而改变,且右侧内容高度小于一整屏时左侧显示一整屏。

    涉及公司隐私此次不进行截图展示。

    代码部分截图:

    主要代码展示

    export default {
      data() {
        return {
          menuHeight: {
            height: "",
            background: "#fff"
          }
        }
      },
      created() {
        //动态调整左侧菜单栏高度 document.documentElement.clientHeight
        var docHeight = document.body.scrollHeight;
        this.menuHeight.height = docHeight - 20 + "px";
        console.log(this.menuHeight.height, "this.containerHeight.height");
      }
    };

    menu组件中加入默认样式

    .el-menu{
        padding-top: 8px;
        height: 100vh;
      }

    2、还有第二种需求

    (2)整个项目不超过一屏展示,所以左侧菜单也不能超过满屏。(这个简单,之后再补充,项目紧急没空余时间)

  • 相关阅读:
    装饰复杂函数
    装饰器01
    闭包
    函数的嵌套定义
    名称空间
    函数的嵌套调用
    函数的对象
    形参
    实参
    形参与实参
  • 原文地址:https://www.cnblogs.com/lxn2/p/14452083.html
Copyright © 2011-2022 走看看