Vue3 菜单展开和收起

上一章我们已经写完登录，登录完之后跳到首页。

首先确定我们首页的布局，我们使用一下这种，在src/views/home.vue：

<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="200px">Aside</el-aside>
      <el-container>
        <el-header>Header</el-header>
        <el-main>Main</el-main>
      </el-container>
    </el-container>
  </div>
</template>

首先写一下我们左边的菜单，菜单可以收起和展开，所以我们在store/module/common.js 中定义一个 isCollapse状态和修改isCollapse的方法。

import { defineStore } from 'pinia'
export const useCommonStore = defineStore('common', {
  state: () => {
    return {
      token: null,
      isCollapse: false, //默认值
    }
  },
  actions: {
   //改变isCollapse
    updateCollapse() {
      this.isCollapse = !this.isCollapse
    },
  },
  persist: true,
})

这是我们要实现的左侧菜单栏代码和样式：

//src/views/home.vue
<template>
  <div>
    <el-container>
      <el-aside @mouseover="mouseover" :width="store.isCollapse ? '100px' : '258px'">
        <div class="sidebar">
          <div  class="ga-flex ga-ai-c ga-j-sb  logo-warp p-15">
            <img class="logo m-r-10" src="./../assets/images/galaxy-logo.png" />
            <h2  v-if="!store.isCollapse" class="flex-1">GaUI</h2>
            <a @click="open" v-if="!store.isCollapse">
              <i class="icon-align-left f-20"></i>
            </a>
          </div>
          <div class="p-15">
            <el-menu
              active-text-color="#534686"
              class="el-menu-vertical-demo"
              :collapse="store.isCollapse"
              @open="handleOpen"
              @close="handleClose"
            >
                <el-sub-menu index="1">
                  <template #title>
                    <el-icon><location /></el-icon>
                    <span>Navigator One</span>
                  </template>
                  <el-menu-item index="1-1">item one</el-menu-item>
                  <el-menu-item index="1-2">item two</el-menu-item>
                 
                </el-sub-menu>
             
            </el-menu>
          </div>
        </div>
      </el-aside>
      <el-container>
        <el-header>
          <div>header</div>
        </el-header>
        <el-main>
          Main
        </el-main>
        <el-footer>Footer</el-footer>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import { useCommonStore } from '../store/module/common.js'
const store = useCommonStore()
// 点击展开收起
const open = () => {
  store.updateCollapse()
}
// 如果是收起状态，那么鼠标移入时则展开
const mouseover = () => {
  if (store.isCollapse) {
    store.updateCollapse()
  }
}
const handleOpen = (key, keyPath) => {
  //console.log(key, keyPath)
}
const handleClose = (key, keyPath) => {
  //console.log(key, keyPath)
}
</script>

<style lang="scss" scoped>
.sidebar {
  background-color: #ffffff;
  transition: 0.3s;
  min-height: 100vh;
  .logo-warp {
    padding: 20px 25px;
    box-shadow: -9px 0 20px rgb(89 102 122 / 10%);
    .logo {
      width: 50px;
      height: 50px;
    }
    a{
      &:hover{
        color: #534686;
      }
    }
  }
  .el-sub-menu__title:hover {
    background-color: var(--el-menu-hover-bg-color);
  }
}
.el-aside {
  box-shadow: 0 0 21px 0 rgb(89 102 122 / 10%);
}
.el-menu {
  border-right: none !important;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 228px;
  min-height: 100%;
}
</style>

左侧菜单效果：