NavBar 导航栏

顶部导航栏组件，提供了基本的布局和用户信息展示功能。

基础用法

<template>
  <g-nav-bar
    :avatar="userInfo.avatar"
    :nickname="userInfo.nickname"
    :logout="handleLogout"
    :is-collapse="isCollapse"
    :set-auto-collapse="handleAutoCollapse"
  >
    <!-- 默认插槽：左侧内容 -->
    <div class="flex items-center">
      <el-icon class="text-[20px] mr-[8px]" @click="toggleCollapse">
        <Expand v-if="isCollapse" />
        <Fold v-else />
      </el-icon>
      <span class="text-[16px] font-medium">系统名称</span>
    </div>

    <!-- 自定义用户区域 -->
    <template #user>
      <div class="custom-user">
        <!-- 自定义用户信息展示 -->
      </div>
    </template>
  </g-nav-bar>
</template>

<script setup>
const isCollapse = ref(false)
const userInfo = ref({
  avatar: 'avatar.png',
  nickname: '用户名',
})

const handleLogout = () => {
  // 处理退出登录
}

const handleAutoCollapse = () => {
  // 处理自动折叠
}

const toggleCollapse = () => {
  isCollapse.value = !isCollapse.value
}
</script>

Props

参数	说明	类型	默认值
isCollapse	是否折叠	boolean	false
avatar	用户头像地址	string	''
nickname	用户昵称	string	''
logout	退出登录方法	function	() => {}
setAutoCollapse	自动折叠处理方法	function	() => {}

Slots

插槽名	说明	作用域参数
default	导航栏左侧内容	-
user	自定义用户信息区域内容	-

功能特性

响应式布局

• 自动监听窗口大小变化
• 支持通过 setAutoCollapse 方法自定义响应式行为

用户信息展示

• 默认展示用户头像和昵称
• 支持自定义用户信息区域
• 内置退出登录功能

样式定制

.navbar-dropdown {
  top: 45px !important;
  right: 16px !important;
  width: 196px;
  height: 48px;
  .el-popper__arrow {
    display: none !important;
  }
}

注意事项

1. 组件基于 Element Plus 的 Dropdown 组件
2. 使用 user 插槽时，将完全替换默认的用户信息展示
3. 组件会自动处理窗口大小变化事件
4. 提供默认的头像占位图功能