vue页面布局实现

Vue 页面布局实现方法

使用 CSS Flexbox 或 Grid 布局

通过 CSS Flexbox 或 Grid 可以快速实现响应式布局。在 Vue 组件的 <style> 部分定义布局样式。

<template>
  <div class="container">
    <header class="header">Header</header>
    <main class="main">Main Content</main>
    <aside class="sidebar">Sidebar</aside>
    <footer class="footer">Footer</footer>
  </div>
</template>

<style>
.container {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  grid-template-columns: 200px 1fr;
  grid-gap: 10px;
}
.header { grid-area: header; }
.main { grid-area: main; }
.sidebar { grid-area: sidebar; }
.footer { grid-area: footer; }
</style>

使用 Vue 组件化布局

将页面拆分为多个组件（如 Header、Sidebar、Main、Footer），通过父子组件通信实现布局。

<template>
  <div>
    <app-header />
    <div class="content">
      <app-sidebar />
      <app-main />
    </div>
    <app-footer />
  </div>
</template>

<script>
import AppHeader from './Header.vue'
import AppSidebar from './Sidebar.vue'
import AppMain from './Main.vue'
import AppFooter from './Footer.vue'

export default {
  components: { AppHeader, AppSidebar, AppMain, AppFooter }
}
</script>

使用 UI 框架（如 Element UI、Vuetify）

利用现成的 UI 框架提供的布局组件快速搭建页面结构。

<template>
  <el-container>
    <el-header>Header</el-header>
    <el-container>
      <el-aside width="200px">Sidebar</el-aside>
      <el-main>Main Content</el-main>
    </el-container>
    <el-footer>Footer</el-footer>
  </el-container>
</template>

<script>
import { ElContainer, ElHeader, ElAside, ElMain, ElFooter } from 'element-ui'

export default {
  components: {
    ElContainer, ElHeader, ElAside, ElMain, ElFooter
  }
}
</script>

动态布局切换

通过 Vue 的动态组件或条件渲染实现布局切换功能。

<template>
  <div>
    <button @click="layout = 'grid'">Grid Layout</button>
    <button @click="layout = 'flex'">Flex Layout</button>

    <div :class="['container', layout]">
      <!-- 内容区域 -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      layout: 'grid'
    }
  }
}
</script>

<style>
.container.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.container.flex {
  display: flex;
  flex-wrap: wrap;
}
</style>

响应式布局实现

结合 CSS 媒体查询和 Vue 的计算属性实现响应式布局。

<template>
  <div :class="['layout', { 'mobile-layout': isMobile }]">
    <!-- 布局内容 -->
  </div>
</template>

<script>
export default {
  computed: {
    isMobile() {
      return window.innerWidth < 768
    }
  }
}
</script>

<style>
.layout {
  display: grid;
  grid-template-columns: 250px 1fr;
}
@media (max-width: 768px) {
  .mobile-layout {
    grid-template-columns: 1fr;
  }
}
</style>

以上方法可以根据项目需求单独或组合使用，实现灵活多样的页面布局效果。