vue实现布局组件

Vue 实现布局组件的方法

基础布局组件结构

使用 Vue 的单文件组件（SFC）创建一个基础布局组件。布局组件通常包含头部、侧边栏、主体内容和页脚。

<template>
  <div class="layout">
    <header class="header">
      <slot name="header"></slot>
    </header>
    <aside class="sidebar">
      <slot name="sidebar"></slot>
    </aside>
    <main class="main">
      <slot></slot>
    </main>
    <footer class="footer">
      <slot name="footer"></slot>
    </footer>
  </div>
</template>

<style scoped>
.layout {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr auto;
  height: 100vh;
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }
</style>

动态布局切换

通过 props 或 provide/inject 实现动态布局切换。例如，根据用户偏好切换不同的布局模式。

<script>
export default {
  props: {
    layoutType: {
      type: String,
      default: 'default'
    }
  },
  provide() {
    return {
      layoutType: this.layoutType
    }
  }
}
</script>

响应式布局

结合 CSS 媒体查询和 Vue 的响应式数据，实现不同屏幕尺寸下的布局调整。

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

export default {
  setup() {
    const isMobile = ref(false)
    const checkScreenSize = () => {
      isMobile.value = window.innerWidth < 768
    }

    onMounted(() => {
      window.addEventListener('resize', checkScreenSize)
      checkScreenSize()
    })

    onBeforeUnmount(() => {
      window.removeEventListener('resize', checkScreenSize)
    })

    return { isMobile }
  }
}
</script>

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

嵌套路由布局

在 Vue Router 中实现嵌套路由布局，使不同路由可以共享相同的布局结构。

// router.js
const routes = [
  {
    path: '/',
    component: Layout,
    children: [
      { path: '', component: Home },
      { path: 'about', component: About }
    ]
  }
]

插槽高级用法

使用作用域插槽向父组件传递布局组件的状态或方法，实现更灵活的布局控制。

<template>
  <div class="layout">
    <slot name="header" :isCollapsed="isCollapsed"></slot>
    <aside class="sidebar">
      <slot name="sidebar" :toggle="toggleSidebar"></slot>
    </aside>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isCollapsed: false
    }
  },
  methods: {
    toggleSidebar() {
      this.isCollapsed = !this.isCollapsed
    }
  }
}
</script>

主题切换功能

通过 CSS 变量和 Vue 的状态管理，实现布局组件的主题切换功能。

<script>
export default {
  data() {
    return {
      currentTheme: 'light'
    }
  },
  methods: {
    toggleTheme() {
      this.currentTheme = this.currentTheme === 'light' ? 'dark' : 'light'
      document.documentElement.setAttribute('data-theme', this.currentTheme)
    }
  }
}
</script>

<style>
:root {
  --bg-color: #ffffff;
  --text-color: #333333;
}

[data-theme="dark"] {
  --bg-color: #1a1a1a;
  --text-color: #f0f0f0;
}

.layout {
  background-color: var(--bg-color);
  color: var(--text-color);
}
</style>