Vue 3 Pinia ElementPlus 实现响应式 Header 组件

Vue 3 + Pinia + ElementPlus 实现响应式 Header 组件

在前端开发中，组件的交互和状态管理是非常关键的。本文将详细介绍如何使用 Vue 3 和 Pinia 实现一个响应式的 Header 组件，包括菜单的折叠与展开、标签页的显示与关闭等逻辑。

1. 组件布局

Header 组件使用 Flex 布局，主要分为两个部分：左侧菜单折叠按钮和标签页，右侧用户信息下拉菜单。

<template>
    <div class="header-container">
        <div class="header-left">
            <!-- 菜单折叠按钮 -->
            <el-icon class="icon-menu" size="25" @click="handleMenu">
                <Fold />
            </el-icon>
            <!-- 标签页 -->
            <ul class="tags">
                <li v-for="tag in menuStore.tagList" :key="tag.path" class="tag"
                    :class="{ 'is-active': tag.path === route.path }" @click="handleClick(tag)"
                >
                    <el-icon>
                        <component :is="tag.icon"></component>
                    </el-icon>
                    <span>{{ tag.name }}</span>
                    <span class="close-icon" @click.stop="closeTab(tag, index)">×</span>
                </li>
            </ul>
        </div>
        <div class="header-right">
            <!-- 下拉框 -->
            <el-dropdown trigger="click">
                <div class="el-dropdown-link">
                    <el-avatar class="avatar" :size="40" src="path-to-user-avatar.jpg"></el-avatar>
                    <p class="user-name">admin</p>
                </div>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item>登出</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
    </div>
</template>

2. Pinia 状态管理

使用 Pinia 管理菜单的折叠状态以及标签页列表。Pinia 提供了简洁而强大的状态管理功能，特别适合 Vue 3。

import { useMenuStore } from '@/stores';
import { useRouter, useRoute } from 'vue-router';

const router = useRouter();
const route = useRoute();
const menuStore = useMenuStore();

// 菜单折叠
const handleMenu = () => {
    menuStore.setMenuIsCollapse(!menuStore.menuIsCollapse);
};

3. 标签页的显示与关闭逻辑

标签页的显示逻辑相对简单，主要通过监听侧边栏的点击事件，将当前页面的信息添加到 Pinia 管理的 tagList 中。

关闭逻辑稍微复杂一些，需要判断点击的标签是否是当前页面的标签，以及 tagList 中标签的数量，来决定是否需要进行路由跳转。

// 点击标签
const handleClick = (item) => {
    router.push(item.path);
};

// 关闭标签
const closeTab = (tag, index) => {
    const tagIndex = menuStore.tagList.findIndex(item => item.path === tag.path);
    menuStore.closeTag(tag);

    if (route.path !== tag.path) {
        return;
    }

    if (menuStore.tagList.length === 0) {
        router.push('/dashboard');
    } else {
        if (tagIndex === menuStore.tagList.length - 1) {
            router.push({ path: menuStore.tagList[tagIndex - 1].path });
        } else {
            router.push({ path: menuStore.tagList[tagIndex].path });
        }
    }
};

4. 样式与细节优化

Header 组件的样式使用了 SCSS，实现了简单的阴影效果和过渡动画，提升了用户体验。

<style lang="scss" scoped>
.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60px;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    // 其他样式...
}
</style>

通过细节优化，如调整标签页关闭时的逻辑判断和样式细节，使组件更加健壮和美观。