从零开始vue3+vite+ts+pinia+router4后台管理(2)-页面布局

项目地址

代码gitee地址

在线预览

页面布局

常见的页面布局有两种

第二中可以让表格铺满屏幕 展示更多的数据 ，但是两种到想要怎么办？今天我们就来实现

如下图

vue3中is的用法

1.限制元素 ，下面是官网的解释

2. 用is来实现动态组件 来实现我们后台页面布局切换

   store/settings.ts 在store文件夹下面创造一个settings.ts来控制一些全局的设置，layoutMode就是控制布局变量的参数

   import {defineStore} from 'pinia'
   import {getToken,setToken} from "@/utils/storage.ts";
   export const useSettingsStore = defineStore('settings', {
       id: 'settings', // id必填，且需要唯一
       state: () => {
           return {
               menuCollapse: false,//// 是否水平折叠收起菜单
               // 布局方式 Classic 经典布局  Streamline 单行布局
               layoutMode: getToken('layoutMode')?getToken('layoutMode'):'Classic'
           }
       },
       actions: {
           changeSetting({ key, value }) {
               //改变全局变量的方法
               this[key] = value
               setToken(key, value)
           },
       }
   })
   

   页面布局用is实现动态组件

   <template>
     <div class="common-layout">
       <component :is="layoutMode" />
     </div>
   </template>
   <script setup lang="ts">
   import Classic from '@/layout/classic/index.vue'
   import Streamline from '@/layout/streamline/index.vue'
   import {useSettingsStore} from '@/store/settings'
   const settingsStore = useSettingsStore()
   import {computed} from 'vue'
   const layoutEnum = {
     Classic: Classic,//经典布局
     Streamline: Streamline//单栏布局
   }
   const layoutMode = computed(() => layoutEnum[settingsStore.layoutMode])
   </script>
   

   切换页面布局的时候改变settingsStore.layoutMode值就行