Vue3菜單展開和收起實現(xiàn)

更新時間：2024年09月18日 09:49:56 作者：jnfy

在Vue項目中實現(xiàn)首頁布局,包括可收放的左側菜單和主體內容區(qū),在store中管理菜單狀態(tài),通過修改isCollapse狀態(tài)控制菜單的展開與收起,在home.vue中編寫左側菜單欄的代碼和樣式,實現(xiàn)一個響應式的用戶界面

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狀態(tài)和修改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,
})

這是我要實現(xiàn)的左側菜單欄代碼和樣式

//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()
}
// 如果是收起狀態(tài)，那么鼠標移入時則展開
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>

左側菜單效果：