Vue实现页面根据浏览器大小自动更新页面大小，只出现一次滚动条

Vue实现页面根据浏览器大小自动更新页面大小，只出现一次滚动条

一、概述

• 使用Vue中的card组件时，常常会发生card的大小比浏览器界面大时，右边会出现两道滚动条，极影响用户体验，做到右边滚动条只出现一次，要求card大小随着放大或缩小浏览器而变大或者变小。

二、具体代码

HTML

b-card no-body  id="cardId" :style="{height:pageHeight}">

Script

写在vue中的mounted中，前面的复制赋值代码是必须的，初始化时的页面。里面的具体px值可以自行调整，根据window.innerHeight的变化，来决定pageHeight的大小

data() {
            return {
                pageHeight:"",
                }
       }
mounted() {
            var innerHeight = window.innerHeight;
            if(innerHeight > 790) {
                this.pageHeight = innerHeight -90+ "px";
            } else {
                setTimeout(() => {
                    that.pageHeight = innerHeight + "px";
                }, 100);
            }
            let self = this;
            const that = this;
            window.onresize = function windowResize () {
                var innerHeight = window.innerHeight;
                if(innerHeight > 790 && innerHeight < 872) {
                    that.pageHeight = innerHeight -105 + "px";
                } else {
                    setTimeout(() => {
                        that.pageHeight = innerHeight + "px";
                    }, 100);
                }
            };

Css样式

<style>
#cardId {
    min-height: 750px;
    max-height: 845px;
    margin-Bottom:10px;
}
</style>

三、总结

• 还是花了一些时间的，希望时间没有白白浪费。加油~