53 lines
1.1 KiB
Vue
53 lines
1.1 KiB
Vue
<template>
|
|
<div class="fullList" ref="pageWrapper">
|
|
<div ref="pageHeader">
|
|
<slot name="pageHeader"></slot>
|
|
</div>
|
|
|
|
<!--表格内容 或者其他-->
|
|
<div ref="pageContent">
|
|
<slot name="pageContent" v-bind:contentHeight="contentHeight"></slot>
|
|
</div>
|
|
<slot> </slot>
|
|
<slot name="pageFooter"></slot>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
var _ = require("lodash");
|
|
export default {
|
|
name: "PageContainer",
|
|
data() {
|
|
return {
|
|
contentHeight: {},
|
|
};
|
|
},
|
|
|
|
mounted() {
|
|
this.handleResize();
|
|
window.addEventListener("resize", this.handleResize);
|
|
},
|
|
destroyed() {
|
|
// 全局监听事件在离开页面时要注销
|
|
window.removeEventListener("resize", this.handleResize);
|
|
},
|
|
methods: {
|
|
//内容高度
|
|
handleResize: _.debounce(function () {
|
|
// let h1 = this.$refs.pageWrapper.offsetHeight;
|
|
let h1 = window.innerHeight;
|
|
let h2 = this.$refs.pageHeader.offsetHeight;
|
|
let contentHeight = h1 - h2-190;
|
|
this.contentHeight = contentHeight;
|
|
}, 500),
|
|
},
|
|
};
|
|
</script>
|
|
<style scoped>
|
|
.fullList {
|
|
height: 100%;
|
|
overflow: hidden;
|
|
}
|
|
</style>
|