2 10.展开和收起菜单功能实现

• 修改

FHeader.vue

...略

<el-icon class="icon-btn" @click="$store.commit('handleAsideWidth')">
            <fold v-if="$store.state.asideWidth =='250px'"/>
            <Expand v-else />
</el-icon>

...略

FMain.vue

<template>
    <div class="f-menu" :style="{ width:$store.state.asideWidth }">
        <el-menu unique-opened :collapse-transition="false"	:collapse="isCollapse" default-active="2" class="border-0" @select="handleSelect">
...略

        </el-menu>
</div>
</template>


<script setup> 
import { useRouter } from "vue-router"
import { computed } from "vue";
import { useStore } from "vuex"

const router = useRouter()
const store = useStore()


// 是否折叠
const isCollapse = computed(()=> !(store.state.asideWidth == "250px"))

...略

</script>


<style>
.f-menu {
    /* width: 250px; */
    transition: all 0.2s;
    height: 100%;
    top: 64px;
    left: 0;
    /* overflow: auto; */
    overflow-y: auto;
    overflow-x: hidden;
    @apply shadow-md fixed bg-light-50;
}
</style>

src/store/index.js

import { createStore } from 'vuex'
import { login,getinfo } from '~/api/manager'
import { setToken } from '~/composables/auth'
import { removeToken } from "~/composables/auth"

// 创建一个新的 store 实例
const store = createStore({
    state() {
        return {
...略
            // 侧边宽度
            asideWidth: "250px"
        }
    },
    mutations: {

...略

        // 展开/缩起侧边
        handleAsideWidth(state) {
            state.asideWidth = state.asideWidth == "250px" ? "64px" : "250px"
        }
    },

...略