elementui使用问题

Question

使用vue框架 以及elementui 当使用el container作为容器时 如何自适应布满整个屏幕

Answer 1

剑鱼红 晚上好🌙🌙🌙
本答案参考ChatGPT-3.5

要使el-container自适应布满整个屏幕，可以按照以下步骤操作：

1. 确保你的项目已经正确引入Element UI库并在Vue实例中进行了注册。

2. 在App.vue文件中，将el-container放置在根元素内，确保它是嵌套在el-main之内。

3. 应用以下CSS样式，使el-container占满整个屏幕：

   <style>
   #app {
     height: 100vh;
   }
   el-container {
     height: 100%;
   }
   </style>
   

4. 如果你希望el-container的高度随窗口大小变化而自适应，可以使用Vue的resize事件和计算属性来动态设置高度。

   首先，在data中声明一个变量：

   data() {
     return {
       windowHeight: window.innerHeight,
     };
   },
   

   然后，在mounted钩子函数中添加resize事件监听器，并在方法中更新窗口高度：

   mounted() {
     window.addEventListener('resize', this.getWindowHeight);
   },
   methods: {
     getWindowHeight() {
       this.windowHeight = window.innerHeight;
     },
   },
   

   最后，在el-container上使用计算属性动态设置高度：

   <el-container :style="{ height: windowHeight + 'px' }">
   <!-- el-container的内容 -->
   </el-container>
   

   现在，el-container将自适应布满整个屏幕，并且会根据窗口大小进行动态调整。

以上是使用Vue框架和Element UI库中el-container作为容器时如何使其自适应布满整个屏幕的解决方案。