Layout 布局 - daniel-qa/Vue GitHub Wiki

Layout 布局 #

el-container

el-container 和它的子组件（如 el-header, el-main, el-footer, el-aside）配合使用，可以帮助开发者轻松地构建常见的页面布局结构。它提供了一种结构化的方式，确保页面的元素有明确的区分和自适应布局。

  • el-header: 页面头部区域

  • el-main: 页面主内容区域

  • el-footer: 页面底部区域

  • el-aside: 页面侧边栏区域

el-container 的高度

el-container 没有默认固定的高度，它会根据子元素自动调整。

如果需要它填充整个视口或设定特定的高度，可以通过给 el-container 或其子元素设置 height 或 flex 来调整。

  • 使其他部分填满剩余空间：

如果你希望 el-main 或 div.container 填充剩余空间，可以使用 flex 布局来实现。

在这种情况下，需要确保 el-header 的高度被计算好，剩余的空间就会分配给 div.container，

例如：

<el-container style="display: flex; flex-direction: column; height: 100vh;">
    <el-header style="color: white; height: 60px;">
        <h1>New Message</h1>
    </el-header>

    <div class="container" v-if="active === 0" style="flex: 1;">
        <New_Msg_Type :active="active" @update-active="updateActive" />
    </div>

    <div class="container" v-if="active === 1" style="flex: 1;">
        <New_Msg_BatchSelect active="active" @update-active="updateActive" />
    </div>
</el-container>

调整样式的效果：

height: 100vh;：使 el-container 的高度为视口的高度。

flex: 1;：使 div.container 占据剩余空间，保持在 el-header 下面，并填充剩余空间。

el-header 的高度：可以根据需求调整，如设置为 60px 等。

優點

el-container 可以方便地控制不同区域的大小，尤其是配合 el-aside、el-header 和 el-footer 使用时，可以很容易地调整这些区域的占比或者布局方式。

例如，通过设置 style 来调整 el-header 的高度、el-footer 的位置等，保持整体布局的灵活性。

el-container 提供了一种简洁的方式来管理页面的主区域和其他区域的布局，避免了使用大量的 div 标签和 CSS 来手动控制布局。

例如，传统布局可能需要很多额外的 div 和 class 来实现类似的效果，而 el-container 通过组件化的方式，减少了这种重复性的代码。

el-container 自带一些常用的布局样式，比如垂直和水平居中、自动调整高度等，这些可以节省开发者大量的样式设置工作。它的布局结构已经为你预设了许多合理的默认值和样式，帮助你快速搭建出功能完善的页面。

示例：

假设我们在页面上需要一个包含头部、主内容区和底部的布局。使用 el-container 可以非常简单地实现这一结构：

<el-container style="height: 100vh">
  <!-- 页面头部 -->
  <el-header>头部</el-header>

  <!-- 页面主体内容 -->
  <el-main>主内容</el-main>

  <!-- 页面底部 -->
  <el-footer>底部</el-footer>
</el-container>
  • 视口与 100vh 变化的实际影响：

放大或缩小页面时，100vh 所对应的像素值不会直接变化，但放大或缩小时，页面的内容会变得更大或更小。

这是因为页面的视觉缩放 会影响你感知到的布局，但不会改变视口本身的尺寸。

  • 举个例子：

浏览器没有放大或缩小时：

假设浏览器视口的高度为 800px，那么 100vh 就是 800px。

当页面放大（比如放大到 150%）时：

即使你放大了页面，浏览器的视口高度仍然是 800px，但显示的内容变得更大。 在这个放大的情况下，100vh 依然表示视口的高度（即 800px），但内容会显得更大。

当页面缩小时（比如缩小到 80%）时：

如果页面缩小，浏览器的视口高度仍然是原来大小（例如 800px），但是因为页面的缩小，可能会使内容显得更加紧凑。

示例：在 Vue 3 中显示 100vh 的像素值

console.log(window.innerHeight);  //  console 輸出

首先创建一个 Vue 组件，然后在组件中获取当前视口的高度（window.innerHeight）并显示它。

<template>
  <div>
    <h1>100vh 等于多少 px</h1>
    <p>{{ viewportHeight }} px</p>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';

// 创建一个响应式变量来存储视口高度
const viewportHeight = ref(0);

// 获取当前视口高度并更新响应式变量
const updateViewportHeight = () => {
  viewportHeight.value = window.innerHeight;
};

// 在组件挂载时更新视口高度
onMounted(() => {
  updateViewportHeight();
  // 监听窗口大小变化，实时更新视口高度
  window.addEventListener('resize', updateViewportHeight);
});

// 在组件销毁前移除事件监听器
onBeforeUnmount(() => {
  window.removeEventListener('resize', updateViewportHeight);
});
</script>

<style scoped>
/* 可选：添加样式 */
h1 {
  font-size: 24px;
  color: #333;
}

p {
  font-size: 20px;
  color: #007bff;
}
</style>
⚠️ **GitHub.com Fallback** ⚠️