后台管理系统Hamburger组件实现

后台管理系统中几乎都会用到Hamburger组件，该组件主要用于折叠和展开左侧菜单栏，系统默认为展开菜单栏，当屏幕较小时可以折叠菜单栏，以便可以用更大的屏幕区域来查看系统数据区域。

以下是组件的实现代码：

<template>
    <div class="hamburger-container" @click="toggleClick">
        <svg-icon
            id="guide-hamburger"
            class="hamburger"
            :icon="icon"
        ></svg-icon>
    </div>
</template>

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

const store = useStore();
const toggleClick = () => {
    store.commit("app/triggerSidebarOpened");
};

const icon = computed(() =>
    store.getters.sidebarOpened ? "hamburger-opened" : "hamburger-closed"
);
</script>

<style lang="scss" scoped>
.hamburger-container {
    padding: 0 16px;
    .hamburger {
        display: inline-block;
        vertical-align: middle;
        width: 20px;
        height: 20px;
    }
}
</style>

需要注意的是，在点击切换的时候，需要将当前是折叠还是展开的记录在状态管理中，以便全局通过状态来修改菜单的样式。

// store/modules/app.js
export default {
    namespaced: true,
    state: () => ({
        sidebarOpened: true,
    }),
    mutations: {
        // 是否切换菜单
        triggerSidebarOpened(state) {
            state.sidebarOpened = !state.sidebarOpened;
        }
    },
    actions: {},
};

上面代码中使用了svg-icon组件为自定义封装的组件，代码的实现可以参考本专栏《Vue 3.0 中封装icon组件使用外部SVG图标》