zy-vue-library/layout/index.vue

<template>
  <el-container>
    <el-header>
      <layout-header
        :login-path="loginPath"
        :logout-url="logoutUrl"
        :change-password-url="changePasswordUrl"
        :tx-img="txImg"
        :user-name="userName"
        :use-more-nav-bar="useMoreNavBar"
        :menu-store="menuStore"
        :user-store="userStore"
        :nav-store="navStore"
        @command="emits('command', $event)"
      >
        <template #logo>
          <slot name="logo"></slot>
        </template>
        <template #userOtherInfo>
          <slot name="userOtherInfo"></slot>
        </template>
        <template #NavBar>
          <slot name="NavBar"></slot>
        </template>
        <template #dropdown>
          <slot name="dropdown"></slot>
        </template>
      </layout-header>
    </el-header>
    <el-container>
      <el-aside>
        <el-scrollbar style="height: calc(100vh - 50px)">
          <el-menu
            router
            unique-opened
            :default-active="route.meta.props && route.name ? route.name : route.meta.activeMenu || route.path"
            background-color="rgb(48, 65, 86)"
            text-color="#edf7ff"
            active-text-color="#409eff"
          >
            <layout-menu :menus="routes" />
          </el-menu>
        </el-scrollbar>
      </el-aside>
      <el-main>
        <el-scrollbar style="height: calc(100vh - 50px)">
          <router-view v-slot="{ Component }">
            <transition name="view" mode="out-in">
              <el-card :key="route.path">
                <el-page-header v-if="route.meta.isBack !== false" title="返回" @back="router.back()">
                  <template #content>
                    {{route.matched.filter((item) => item.meta?.title).at(-1).meta.title }}
                  </template>
                </el-page-header>
                <component :is="Component"></component>
              </el-card>
            </transition>
          </router-view>
        </el-scrollbar>
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup>
import LayoutHeader from "./header/index.vue";
import LayoutMenu from "./menu/index.vue";
import { computed } from "vue";
import { useRoute, useRouter } from "vue-router";
import tx from './header/tx.png'
import {
  ElContainer,
  ElHeader,
  ElAside,
  ElScrollbar,
  ElMenu,
  ElCard,
  ElMain,
  ElPageHeader
} from 'element-plus'
import "element-plus/es/components/container/style/css";
import "element-plus/es/components/header/style/css";
import "element-plus/es/components/aside/style/css";
import "element-plus/es/components/scrollbar/style/css";
import "element-plus/es/components/menu/style/css";
import "element-plus/es/components/card/style/css";
import "element-plus/es/components/main/style/css";
import "element-plus/es/components/page-header/style/css";

defineOptions({
  name: "Layout",
});
const props = defineProps({
  menuStore: { type: Object, required: true },
  userStore: { type: Object, required: true },
  navStore: { type: Object, required: true },
  loginPath: { type: String, default: "/login" },
  logoutUrl: { type: String, default: "/sys/logout" },
  changePasswordUrl: { type: String, default: "/sys/user/password" },
  txImg: { type: String, default: tx },
  userName: { type: String, default: '' },
  useMoreNavBar: { type: Boolean, default: true },
});
const emits = defineEmits(["command"]);
const router = useRouter();
const route = useRoute();
const routes = computed(() => props.menuStore.getMenus);
</script>

<style scoped lang="scss">
.el-header {
  --el-header-padding: 0;
  --el-header-height: 50px;
}

.el-aside {
  width: 210px;
  background-color: rgb(48, 65, 86);
}

.el-menu {
  width: 210px;
  min-height: calc(100vh - 50px);
  border-right: none;
  background-color: rgb(48, 65, 86);

  :deep {
    span {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
}

:deep {
  .el-sub-menu__title *,
  .el-menu-item * {
    vertical-align: middle !important;
  }

  .is-always-shadow {
    box-shadow: none !important;
  }
}

.el-main {
  --el-main-padding: 0;
}

.el-card {
  margin: 20px;
  border: none !important;
  min-height: calc(100vh - 90px);
}
</style>