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>