效果展示功能实现

1、增加store文件“index.ts”

export default {  state: {    isCollapse: false, // 是否折叠  },  getters: {  },  mutations: {    SET_IS_COLLAPSE: (state: any, isCollapse: boolean) => {      state.isCollapse = isCollapse    }  },  actions: {    setIsCollapse({ commit }: any, isCollapse = false) {      commit('SET_IS_COLLAPSE', isCollapse)    }  }}

2、左导航栏功能

利用element-plus的组件el-menu实现；

<template>  <el-menu    :default-active="currentPath"    :router="true"    class="el-menu-vertical-demo"    @open="handleOpen"    @close="handleClose"    :collapse="isCollapse"  >    <el-menu-item index="/home">      <el-icon><Menu /></el-icon>      <span>首页</span>    </el-menu-item>    <el-sub-menu index="1">      <template #title>        <el-icon><Document /></el-icon>        <span>常用页面</span>      </template>      <el-sub-menu index="1-1">        <template #title>列表</template>        <el-menu-item index="/list">普通列表</el-menu-item>      </el-sub-menu>      <el-menu-item index="/form">表单</el-menu-item>      <el-menu-item index="/statistics">统计报表</el-menu-item>    </el-sub-menu>    <el-sub-menu index="2">      <template #title>        <el-icon><Setting /></el-icon>        <span>系统管理</span>      </template>      <el-menu-item index="/role">角色管理</el-menu-item>      <!-- <el-sub-menu index="2-1">        <template #title>常用页面</template>        <el-menu-item index="/form">表单</el-menu-item>        <el-menu-item index="/list">列表</el-menu-item>      </el-sub-menu> -->    </el-sub-menu>  </el-menu></template><script setup lang="ts">import { ref, computed } from 'vue'import { useRoute } from 'vue-router'import { useStore } from 'vuex'let currentPath = ref<any>('/')const route = useRoute()const store = useStore()const handleOpen = (key: any, keyPath: any) => {  // console.log(key, keyPath)}const handleClose = (key: any, keyPath: any) => {  // console.log(key, keyPath)}const isCollapse = computed(() => store.state.menu.isCollapse)currentPath = computed(() =>route.path)</script><style scoped lang="less">.el-menu {  height: 100%;}</style>

3、头部功能

主要查看“el-icon”这部分的代码；

<template>  <div class="header">    <el-icon color="#409EFC" size="100" @click="foldHandle()">      <component :is="isCollapse ? 'Expand' : 'Fold'" />    </el-icon>    <div class="title" @click="router.push('/')">Vue3 admin</div>    <div class="exit">      <el-button type="text" @click="open">退出登录</el-button>    </div>  </div></template><script lang="ts" setup>import { computed } from 'vue'import { useRouter } from 'vue-router'import { useStore } from 'vuex'import { ElMessageBox, ElMessage } from 'element-plus'import utils from '../utils'const router = useRouter()const store = useStore()const open = () => {  ElMessageBox.confirm('确定退出系统?', '提示信息', {    confirmButtonText: '确定',    cancelButtonText: '取消',    type: 'warning'  })    .then(() => {      ElMessage({        type: 'success',        message: '成功退出'      })      utils.localRemove('token')      router.push('/login')    })    .catch(() => {      console.log('返回')    })}const isCollapse = computed(() => store.state.menu.isCollapse)// 展开/收起菜单const foldHandle = () => {  store.dispatch('setIsCollapse', !isCollapse.value)}</script><style scoped lang="less">.header {  height: 50px;  border-bottom: 1px solid #e9e9e9;  display: flex;  justify-content: space-between;  align-items: center;  padding: 0 20px;  .title {    font-size: 20px;    cursor: pointer;  }  .exit {    color: #409eff;  }}</style>