Browse Source

perf: pageBackground组件内容高度自适应

TwoKe 2 years ago
parent
commit
d833e957cc
2 changed files with 10 additions and 5 deletions
  1. 10 3
      src/views/main/components/PageBackground.vue
  2. 0 2
      src/views/main/index.vue

+ 10 - 3
src/views/main/components/PageBackground.vue

@@ -1,10 +1,10 @@
 <template >
-  <div class="page-background">
+  <div ref="page" class="page-background">
     <div class="panel-bg">
       <div class="left-bg"></div>
       <div class="right-bg"></div>
     </div>
-    <div class="content">
+    <div ref="content" class="content">
       <slot />
     </div>
   </div>
@@ -17,7 +17,14 @@ export default {
   data() {
     return {}
   },
-  methods: {}
+  mounted() {
+    this.$nextTick(() => {
+      const contentDom = this.$refs.content
+      const pageDom = this.$refs.page
+      pageDom.style.height = `${contentDom.clientHeight + 1}px`
+      pageDom.style.width = `100vw`
+    })
+  }
 }
 </script>
 

+ 0 - 2
src/views/main/index.vue

@@ -46,8 +46,6 @@ export default {
 
 <style scoped lang='less'>
 #main-page {
-  width: 100vw;
-  height: 100vh;
   .content-module {
     margin-top: 18px;
     display: flex;