vue监听浏览器窗口的变化，随着窗口变化调整滚动容器高度

组件

<template>
<div class="scroll-bar-box" :style="{
       
       height:styles.height,padding:styles.padding}">
<slot></slot>
</div>    
</template>
<script>
export default {
     
     
    name:'my-scroll-bar',
    data(){
     
     
        return{
     
                 
        }
    },
    props:{
     
     
        styles:Object
    }
}
</script>
<style scoped>
.scroll-bar-box{
     
     
    overflow-y: auto;
}
.scroll-bar-box::-webkit-scrollbar {
     
     /*滚动条整体样式*/
        width: 3px;     /*高宽分别对应横竖滚动条的尺寸*/
        height: 1px;
    }
.scroll-bar-box::-webkit-scrollbar-thumb {
     
     /*滚动条里面小方块*/
        border-radius: 10px;
         -webkit-box-shadow: inset 0 0 3px #afb2b8;
        background: #afb2b8;
    }
.scroll-bar-box::-webkit-scrollbar-track {
     
     /*滚动条里面轨道*/
        -webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.2);
        border-radius: 10px;
        background: #EDEDED;
    }
</style>

应用

<template>
	<my-scroll-bar :styles="{height: fh +'px'}" ref="filterWrap">
	</my-scroll-bar>
</template>

export default {
    
    
	import MyScrollBar from './scrollbar'
  	components: {
    
     MyScrollBar },
	data() {
    
    
		return {
    
    
		 filterWrapHeight : null
		}
	},
	mounted() {
    
    
		let th = 205
		let wh = window.innerHeight;
	    window.onresize =()  =>{
    
    
	        return (()=>{
    
    
	          wh = window.innerHeight
	          this.filterWrapHeight  = wh-th
	        })()
	    }
	},
}