<template>
    <div
            class="scroll_container"
            ref="ScrollElCp"
            :style="{
        height:height,
        width:width,
    }">
        <slot></slot>
    </div>
</template>
<script>
//滚动容器组件（解决页面切换时不记录组件滚东条的状况）
export default {
    name: 'ScrollElCp',
    props:{
        height:String,  //高度
        width:String,  //宽度
    },
    data() {
        return {
            scrollTop:0,
        }
    },
    watch:{
        $route(){
            const ScrollElCp = this.$refs.ScrollElCp;
            if(!ScrollElCp) return;
            ScrollElCp.scrollTop = this.scrollTop;
        },
    },
    mounted(){
        const ScrollElCp = this.$refs.ScrollElCp;
        ScrollElCp.addEventListener('scroll',()=>{
            this.scrollTop = ScrollElCp.scrollTop;
        });
    },
}
</script>
<style scoped lang="scss">
.scroll_container {
  overflow: scroll;
}
</style>