vue下登录页背景图上下空白处自适应等高

遇到需求，登录页面需要顶部和底部上下等高，并且随着浏览器自适应上下高度。

解决方法：

vue界面的data中先定义

 data() {
    return {
      windowHeight: "", 
      topHeight: ""
    };
  },

mounted中：

mounted() {
    this.windowHeight = window.innerHeight;  // 浏览器可见区域高度
    this.topHeight = (this.windowHeight - 600) / 2 + "px"; // 浏览器可见区域高度 - 600为背景图高度 / 2 = 平均上下高度
    window.onresize = () => {
      return (() => {
        this.windowHeight = window.innerHeight;
        this.topHeight = (this.windowHeight - 600) / 2 + "px";
      })();
    };
}

mouted为界面加载时执行的方法，那么，应该怎么监听到mouned中的 window.onresize呢？

// 使用vue的watch事件监听
watch: { 
    topHeight(val) {
      this.topHeight = val;
    }
  },

再在顶部元素中绑定style即可。

 <div :style="{height:topHeight}">
        <span>xx管理平台</span>
</div>

最后~再延伸一下：顶部一般是有logo或者文字，该怎样让顶部的内容也自适应垂直居中呢？

最简单的方法，在顶部的外层加上样式 display:flex;其里面的内容，加上margin:auto; 即可实现上下垂直居中。

转载于:https://www.cnblogs.com/ss977/p/9964397.html