44 lines
956 B
Vue
44 lines
956 B
Vue
|
<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>
|