BCVP.VUE3系列第十一课：基于总线实现框架多种布局样式

template> el-drawer v-model="drawerVisible" title="布局设置" size="290px">  el-divider class="divider" content-position="center"> el-icon> Notification /> el-icon> 布局样式 el-divider> div class="layout-box"> el-tooltip effect="dark" content="纵向" placement="top" :show-after="200"> div :class="['layout-item layout-vertical', { 'is-active': layout == 'vertical' }]" @click="setLayout('vertical')"> div class="layout-dark">div> div class="layout-container"> div class="layout-light">div> div class="layout-content">div> div> el-icon v-if="layout == 'vertical'"> CircleCheckFilled /> el-icon> div> el-tooltip> el-tooltip effect="dark" content="横向" placement="top" :show-after="200"> div :class="['layout-item layout-transverse', { 'is-active': layout == 'transverse' }]" @click="setLayout('transverse')"> div class="layout-dark">div> div class="layout-content">div> el-icon v-if="layout == 'transverse'"> CircleCheckFilled /> el-icon> div> el-tooltip> div>
  el-divider class="divider" content-position="center"> el-icon> Setting /> el-icon> 界面设置 el-divider> div class="theme-item"> span>菜单折叠span> el-switch v-model="isCollapse" /> div> div class="theme-item"> span>菜单手风琴span> el-switch v-model="accordion" /> div> div class="theme-item"> span>面包屑span> el-switch v-model="breadcrumb" /> div> div class="theme-item"> span>面包屑图标span> el-switch v-model="breadcrumbIcon" /> div> div class="theme-item"> span>标签栏span> el-switch v-model="tabs" /> div> div class="theme-item"> span>标签栏图标span> el-switch v-model="tabsIcon" /> div> div class="theme-item"> span>页脚span> el-switch v-model="footer" /> div> el-drawer>template>
script setup lang="ts">import { ref } from "vue";import { storeToRefs } from "pinia";import { useGlobalStore } from "@/stores/modules/global";import type { LayoutType } from "@/stores/interface";import mittBus from "@/utils/mittBus";
const globalStore = useGlobalStore();const { layout, isCollapse, accordion, breadcrumb, breadcrumbIcon, tabs, tabsIcon, footer } = storeToRefs(globalStore);
// 设置布局方式const setLayout = (val: LayoutType) => { globalStore.setGlobalState("layout", val);};
// 打开主题设置const drawerVisible = ref(false);mittBus.on("openThemeDrawer", () => { drawerVisible.value = true});script>
style scoped lang="scss">@import "./index.scss";style>

template> el-container class="layout"> el-header> div class="logo flx-center"> img class="logo-img" src="@/assets/images/logo.svg" alt="logo" /> span class="logo-text">{{ title }}span> div> el-menu mode="horizontal" :router="false" :default-active="activeMenu">  template v-for="subItem in menuList" :key="subItem.name"> el-sub-menu v-if="subItem.children?.length" :key="subItem.name" :index="subItem.name + 'el-sub-menu'"> template #title> el-icon> component :is="subItem.meta.icon">component> el-icon> span>{{ subItem.meta.title }}span> template> SubMenu :menu-list="subItem.children" /> el-sub-menu> el-menu-item v-else :key="subItem.path + 'el-menu-item'" :index="subItem.path" @click="handleClickMenu(subItem)"> el-icon> component :is="subItem.meta.icon">component> el-icon> template #title> span>{{ subItem.meta.title }}span> template> el-menu-item> template> el-menu> ToolBarRight /> el-header> Main /> el-container>template>
script setup lang="ts" name="layoutTransverse">import { computed } from "vue";import { useAuthMenuStore } from "@/stores/modules/authMenu";import { useRoute, useRouter } from "vue-router";import Main from "@/layouts/components/Main/index.vue";import ToolBarRight from "@/layouts/components/Header/ToolBarRight.vue";import SubMenu from "@/layouts/components/Menu/SubMenu.vue";
const title = 'BlogVue3';
const route = useRoute();const router = useRouter();const authStore = useAuthMenuStore();const menuList = computed(() => authStore.showMenuListGet);const activeMenu = computed(() => (route.meta.activeMenu ? route.meta.activeMenu : route.path) as string);
const handleClickMenu = (subItem: Menu.MenuOptions) => { if (subItem.meta.isLink) return window.open(subItem.meta.isLink, "_blank"); router.push(subItem.path);};script>
style scoped lang="scss">@import "./index.scss";style>