md

src/components/XdPageContainer/index.vue

@@ -0,0 +1,55 @@
+<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;
+      console.log("h1: ", h1);
+      console.log("contentHeight: ", contentHeight);
+
+      this.contentHeight = contentHeight;
+    }, 500),
+  },
+};
+</script>
+<style scoped>
+.fullList {
+  height: 100%;
+  overflow: hidden;
+}
+</style>