# 页面布局切换

**Repository Path**: micefind/page-layout-switching

## Basic Information

- **Project Name**: 页面布局切换
- **Description**: 开发后台管理时，有时会根据业务采用不同布局模式，常见的页面布局包括单侧边栏布局、双侧边栏布局、双栏布局和顶栏浮动布局。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-01-22
- **Last Updated**: 2025-01-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue后台管理：页面布局切换

### 前言

开发后台管理时，有时会根据业务采用不同布局模式，常见的页面布局包括单侧边栏布局、双侧边栏布局、双栏布局和顶栏浮动布局。

也可以让用户自行选择切换页面布局，感觉很有趣，实现起来其实也很简单，在vue项目中只需要使用`is`来渲染动态组件。

关键步骤如下：

1. pinia保存布局模式
2. 页面布局使用is动态渲染组件
3. 设置切换布局模式

### 1 pinia保存布局模式

```
import { defineStore } from "pinia"

export const useSettingStore = defineStore("setting", {
  state: () => {
    return {
      layoutMode: localStorage.getItem("layoutMode") || "Classic",
    }
  },
  actions: {
    setLayoutMode(layoutMode) {
      this.layoutMode = layoutMode
      localStorage.setItem("layoutMode", layoutMode)
    },
  },
})

```

### 2 页面布局使用is动态渲染组件

```
<script setup>
import Classic from "@/views/layout/classic/index.vue"
import Streamline from "@/views/layout/streamline/index.vue"
import { useSettingStore } from "@/store/setting.js"
const settingStore = useSettingStore()
import { computed } from "vue"

const layoutEnum = {
  Classic: Classic, //经典布局
  Streamline: Streamline, //单栏布局
}
const layoutMode = computed(() => layoutEnum[settingStore.layoutMode])
</script>

<template>
  <component :is="layoutMode" />
</template>

<style scoped></style>
```

### 3 设置切换布局模式

```
<script setup>
import { useSettingStore } from "@/store/setting"

const settingStore = useSettingStore()
const changeLayout = (layout) => {
  settingStore.setLayoutMode(layout)
}
</script>

<template>
  <button @click="changeLayout('Classic')">经典布局</button>
  <button @click="changeLayout('Streamline')">单栏布局</button>
</template>

<style scoped lang="scss"></style>

```

代码gitee地址：https://gitee.com/micefind/page-layout-switching