Background project Express-Mysql-Vue3-TS-Pinia page layout-sidebar menu

携手创作,共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第4天,点击查看活动详情

页面布局-侧边栏菜单

引言

通过之前一段时间 Express 和 Mysql 的学习

这里尝试来搭建一个 后台系统 来巩固下学习的技术.

页面布局-侧边栏菜单

侧边栏菜单,Essential for our backend projects.

这里主要是通过 ElementPlus 中的 Three important labels

el-menu、el-sub-menu、el-menu-item

and coordinating routing route 和 router to control the jump.

今天讲解 el-menu 以及 通过 Pinia 来控制 A stretch of the menu

el-menu

目录结构如下：

// layout/aside/index.vue

<template>
  <div>
    <el-aside id="asideNav">
      <div class="logo-name">
        <span v-if="logoShow">wzms</span>
        <span v-else>旺仔米苏</span>
      </div>

      <div class="elmenu">
        <el-menu class="el-menu-vertical" :default-active="route.path" background-color="#03152A" text-color="rgba(255,255,255,.7)" active-text-color="#ffffff" @select="selectmenu" :router="true" :collapse="isCollapse" :collapse-transition="true" :uniquerouter="uniquerouter" >
        </el-menu>
      </div>
     
    </el-aside>
  </div>
</template>
<script setup lang="ts"> import { storeToRefs } from 'pinia' import { useLayoutStore } from '@/store' import { useRoute, useRouter } from 'vue-router' const layoutStore = useLayoutStore() const { logoShow, isCollapse, uniquerouter } = storeToRefs(layoutStore) const router = useRouter() const route = useRoute() const selectmenu = (key) => { console.log(key, 'key') } </script>

<style lang="scss" scoped> #asideNav { width: auto !important; height: 100%; display: flex; flex-direction: column; overflow: hidden; .logo-name { height: 50px; line-height: 50px; text-align: center; font-size: 16px; background-color: #03152a !important; color: #5e6d82; z-index: 999; font-weight: 300; } .el-menu-vertical:not(.el-menu--collapse) { width: 200px; overflow-y: scroll; overflow-x: hidden; &::-webkit-scrollbar { display: none; } } .elmenu { height: 100%; background-color: #03152a; overflow-y: scroll; overflow-x: hidden; &::-webkit-scrollbar { display: none; } ul { border-right: none; } } } </style>
复制代码

You can see that the current menu style has been processed,

At this point the effect of the page has come out,

有 侧边栏、header、面包屑、main、footer

尝试点击 The control menu expands and contracts Change the width of the menu.

Pinia 中的代码如下

After clicking the After button,The menu in the left sidebar is zoomed,效果如下：

再次点击后,will be restored.

总结

通过 Express-Mysql-Vue3-TS-Pinia 做出一个 后台系统 项目

页面布局-侧边栏菜单,The overall layout effect has been preliminarily completed.